:root { --ink:#102d36; --cream:#f7f1e5; --orange:#f06543; --sea:#7ac2bd; --sand:#e9c77d; --mono:'DM Mono',monospace; --sans:'DM Sans',sans-serif; --serif:'Playfair Display',serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--cream); font-family:var(--sans); } a { color:inherit; text-decoration:none; } .announcement { background:var(--ink); color:var(--cream); font:500 11px/1 var(--mono); letter-spacing:.12em; padding:11px 24px; text-align:center; text-transform:uppercase; } .site-header { align-items:center; display:flex; justify-content:space-between; padding:20px 5.4vw; } .brand { align-items:center; display:flex; font:700 14px/.87 var(--serif); letter-spacing:.035em; } .brand em { color:var(--orange); font-style:normal; } .brand-mark { color:var(--orange); font-size:25px; margin-right:8px; } .main-nav { align-items:center; display:flex; gap:26px; font-size:13px; font-weight:700; } .main-nav a:not(.nav-shop):hover, .text-link:hover { color:var(--orange); } .nav-shop, .button-primary { background:var(--orange); color:white; padding:12px 17px; } .menu-button { background:none; border:0; color:var(--ink); display:none; font:700 13px var(--sans); }
.hero { display:grid; grid-template-columns:1.05fr .95fr; min-height:585px; padding:38px 5.4vw 70px; } .hero-copy { align-self:center; padding:30px 5vw 30px 0; position:relative; z-index:1; } .eyebrow { color:var(--orange); font:500 11px/1.3 var(--mono); letter-spacing:.12em; margin:0 0 18px; text-transform:uppercase; } h1,h2 { font-family:var(--serif); letter-spacing:-.055em; line-height:.95; margin:0; } h1 { font-size:clamp(64px,8.3vw,125px); } h1 i,h2 i { color:var(--orange); font-weight:600; } .hero-text { font-size:17px; line-height:1.55; margin:27px 0; max-width:410px; } .hero-actions { align-items:center; display:flex; gap:25px; } .button { font-size:13px; font-weight:700; } .button span,.text-link span { font-size:20px; margin-left:10px; vertical-align:-1px; } .text-link { border-bottom:1px solid currentColor; font-size:13px; font-weight:700; padding-bottom:4px; }
.hero-art { background:var(--sea); min-height:490px; overflow:hidden; position:relative; } .sun { background:#f6d57e; border-radius:50%; height:230px; left:50%; position:absolute; top:82px; transform:translateX(-50%); width:230px; } .water { background:repeating-linear-gradient(170deg,#3f9496 0 5px,#6bb8b3 5px 11px); bottom:0; height:37%; left:0; position:absolute; right:0; } .ship { height:265px; left:50%; position:absolute; top:135px; transform:translateX(-50%); width:270px; } .mast { background:var(--ink); height:185px; left:130px; position:absolute; top:0; width:7px; z-index:2; } .sail { background:var(--cream); clip-path:polygon(0 0,100% 91%,0 100%); height:150px; position:absolute; top:12px; width:118px; } .sail-one { left:18px; transform:scaleX(-1); } .sail-two { left:138px; } .hull { background:var(--ink); border-radius:0 0 100% 100%; bottom:30px; height:65px; left:25px; position:absolute; transform:skewX(-11deg); width:220px; } .hero-coordinate { bottom:20px; color:var(--ink); font:500 10px var(--mono); left:24px; letter-spacing:.12em; position:absolute; }
.ticker { background:var(--orange); color:white; display:flex; font:700 12px var(--mono); gap:30px; justify-content:space-around; letter-spacing:.075em; overflow:hidden; padding:16px 4vw; text-transform:uppercase; white-space:nowrap; } .ticker b { color:var(--ink); }
.section-wrap { margin:auto; max-width:1280px; padding-left:5.4vw; padding-right:5.4vw; } .story { padding-bottom:130px; padding-top:130px; } .section-label { color:#708185; font:500 10px var(--mono); letter-spacing:.1em; text-transform:uppercase; } .section-label span { color:var(--orange); margin-right:10px; } .story-content { display:grid; gap:60px; grid-template-columns:1.25fr .7fr; margin-top:72px; } h2 { font-size:clamp(46px,5.5vw,82px); } .story-content > div { font-size:17px; line-height:1.6; padding-top:20px; } .story-content .text-link { display:inline-block; margin-top:21px; }
.featured { background:#dce8e1; padding:100px 0 110px; } .featured-heading { display:grid; gap:26px; grid-template-columns:.7fr 1fr auto; align-items:end; } .featured-heading .text-link { margin-bottom:8px; } .product-grid { display:grid; gap:20px; grid-template-columns:repeat(3,1fr); margin:68px auto 0; max-width:1170px; padding:0 5.4vw; } .product-card { min-width:0; } .product-visual { align-items:center; display:flex; height:390px; justify-content:center; overflow:hidden; position:relative; } .product-visual:after { border:1px solid rgba(255,255,255,.45); content:''; inset:14px; position:absolute; } .blue { background:#8bc5c1; } .sand { background:#dbc786; } .coral { background:#e87660; } .shirt { color:var(--cream); text-align:center; }.shirt:before { background:currentColor; clip-path:polygon(25% 0,38% 10%,62% 10%,75% 0,100% 18%,87% 43%,78% 36%,78% 100%,22% 100%,22% 36%,13% 43%,0 18%); content:''; height:285px; opacity:.96; position:absolute; width:245px; } .shirt span,.shirt small { color:var(--ink); position:relative; z-index:1; } .shirt span { font-size:42px; margin-top:20px; } .shirt small { font:700 13px/1 var(--mono); margin:-28px 0 0 14px; } .cap:before { background:#223d42; border-radius:130px 130px 0 0; box-shadow:55px 100px 0 -23px #223d42; content:''; height:150px; position:absolute; transform:rotate(-7deg); width:230px; } .cap span,.cap small { color:var(--cream); font:700 15px var(--mono); position:relative; z-index:1; }.cap small { font-size:9px; margin-left:6px; margin-top:28px; } .skull:before { background:#fff7e5; } .product-meta { display:grid; gap:5px; padding:15px 0; }.product-meta span { color:#617379; font:500 10px var(--mono); letter-spacing:.06em; text-transform:uppercase; }.product-meta b { font:700 17px var(--serif); }.product-meta em { color:var(--orange); font:700 12px var(--sans); font-style:normal; margin-top:8px; }
.categories { padding-bottom:130px; padding-top:125px; } .category-list { margin-top:45px; }.category-list a { align-items:center; border-top:1px solid #b9c0bb; display:grid; font:700 clamp(29px,4vw,55px) var(--serif); grid-template-columns:80px 1fr auto; letter-spacing:-.04em; padding:21px 0; }.category-list a:last-child { border-bottom:1px solid #b9c0bb; }.category-list span { color:var(--orange); font:500 11px var(--mono); letter-spacing:0; }.category-list b { color:var(--orange); font:400 31px var(--sans); }.category-list a:hover { color:var(--orange); }
.crew { background:var(--ink); color:var(--cream); display:grid; gap:15%; grid-template-columns:1fr 1fr; padding:95px max(5.4vw,30px); }.crew h2 { font-size:clamp(50px,6vw,90px); }.crew > div > p:last-child { font-size:16px; line-height:1.5; max-width:350px; }.email-form { align-self:center; }.email-form label { font:500 11px var(--mono); letter-spacing:.1em; text-transform:uppercase; }.email-form div { border-bottom:1px solid #8ca1a1; display:flex; margin-top:12px; }.email-form input { background:transparent; border:0; color:white; font:17px var(--sans); outline:0; padding:12px 0; width:100%; }.email-form button { background:transparent; border:0; color:var(--orange); cursor:pointer; font-size:28px; }.email-form small { color:#9aabab; display:block; font-size:11px; margin-top:13px; } footer { align-items:center; background:#09232c; color:#dce8e1; display:grid; font-size:12px; gap:20px; grid-template-columns:1.3fr 1.5fr auto auto; padding:28px 5.4vw; } footer a:not(.brand) { border-bottom:1px solid #83979a; padding-bottom:3px; } footer .brand { color:white; }
@media (max-width:760px) { .site-header { padding:18px 6vw; }.main-nav { background:var(--cream); display:none; flex-direction:column; left:0; padding:25px 6vw; position:absolute; right:0; top:92px; z-index:3; }.main-nav.open { display:flex; }.menu-button { display:block; }.hero { display:block; padding:25px 6vw 55px; }.hero-copy { padding-right:0; }.hero-art { min-height:360px; margin-top:30px; }.sun { height:170px; top:55px; width:170px; }.ship { transform:translateX(-50%) scale(.75); transform-origin:top center; }.story { padding-bottom:85px; padding-top:85px; }.story-content,.crew { display:block; }.story-content { margin-top:48px; }.story-content > div { padding-top:15px; }.featured { padding:75px 0; }.featured-heading { display:block; }.featured-heading .section-label { margin-bottom:28px; }.featured-heading .text-link { display:inline-block; margin-top:25px; }.product-grid { display:flex; margin-top:45px; overflow:auto; padding-left:6vw; padding-right:6vw; }.product-card { flex:0 0 78vw; }.product-visual { height:355px; }.categories { padding-bottom:85px; padding-top:85px; }.category-list a { grid-template-columns:45px 1fr auto; }.crew { padding:70px 6vw; }.email-form { margin-top:45px; } footer { display:flex; flex-wrap:wrap; padding:30px 6vw; } footer p { flex-basis:100%; margin:0; } }