/* ===================================================================== WASHTRON INVESTOR WEBSITE — shared styles (every page uses this file) --------------------------------------------------------------------- 1. Design tokens (colours, fonts) 7. Page hero (top of inner pages) 2. Base + typography 8. Content blocks (cards, lists, tables) 3. Buttons and labels 9. Forms 4. Navigation bar (kept from Figma) 10. FAQ accordion 5. Footer (kept from Figma, compact) 11. Closing scene (dark image band) 6. Motion helpers (reveal, tilt…) 12. Phone layout ===================================================================== */ /* 1. DESIGN TOKENS -------------------------------------------------- */ :root{ --ground:#f4f0ea; /* porcelain page background */ --raise:#fbf9f6; /* lifted surfaces: cards, panels */ --ink:#191715; /* main text */ --stone:#857b71; /* secondary text */ --dim:#cfc6bb; /* unlit words, slider track */ --hair:#ddd3c6; /* hairline borders */ --champ:#a8865a; /* champagne gold: labels, numbers, fine lines */ --orange-ink:#e8480c; /* orange that stays readable on porcelain */ --amber:#ffab07; /* active menu item (from Figma) */ --ok:#2f8a57; /* status: done */ --grad:linear-gradient(90deg,#ff370a 0%,#ff5505 50%,#ff7200 100%); /* header, exact */ --grad-foot:linear-gradient(160deg,#ff4601 0%,#ff4c04 55%,#df2f00 100%); /* footer, exact */ --f:"Nunito", system-ui, -apple-system, "Segoe UI", sans-serif; --ease:cubic-bezier(.2,.7,.2,1); color-scheme:light; } /* 2. BASE + TYPOGRAPHY ---------------------------------------------- */ *{box-sizing:border-box} html{scroll-behavior:smooth} body{background:var(--ground);color:var(--ink);font:17px/1.7 var(--f);margin:0} img{max-width:100%} h1,h2,h3,h4{text-wrap:balance;margin:0;line-height:1.04;font-weight:200;letter-spacing:-.02em} h1 b,h2 b,h3 b,h4 b{font-weight:900} p{margin:0} a{color:inherit} .wrap{max-width:1280px;margin:0 auto;padding-inline:clamp(20px,5vw,64px)} .section{padding-block:clamp(80px,11vw,150px)} .h-xl,.h-lg,.h-md{line-height:1.08} .h-xl{font-size:clamp(40px,6vw,92px)} .h-lg{font-size:clamp(34px,4.6vw,64px)} .h-md{font-size:clamp(26px,3vw,40px)} .lead{font-size:clamp(17px,1.4vw,20px);color:var(--stone);max-width:58ch} .muted{color:var(--stone)} .small{font-size:14px} .num{font-variant-numeric:tabular-nums} /* Checkboxes: a white box with an orange tick, never a dark box */ input[type=checkbox]{-webkit-appearance:none;appearance:none;width:22px;height:22px;flex:0 0 22px;margin:0;border:1.5px solid #cdbfae;border-radius:6px;background:#fff;display:inline-grid;place-content:center;vertical-align:middle;cursor:pointer;transition:all .2s} input[type=checkbox]::after{content:"";width:11px;height:6px;border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) scale(0);margin-top:-3px;transition:transform .2s var(--ease)} input[type=checkbox]:checked{background:var(--orange-ink);border-color:var(--orange-ink)} input[type=checkbox]:checked::after{transform:rotate(-45deg) scale(1)} input[type=checkbox]:focus-visible{outline:2px solid var(--orange-ink);outline-offset:2px} .opt input[type=checkbox]{position:absolute;opacity:0} /* 3. BUTTONS AND LABELS --------------------------------------------- */ .label{display:flex;align-items:center;gap:14px;font-size:11px;font-weight:800;letter-spacing:.32em;text-transform:uppercase;color:var(--champ)} .label::before{content:"";width:36px;height:1px;background:var(--champ)} .btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;background:var(--grad);color:#fff;font:800 13px var(--f);letter-spacing:.14em;text-transform:uppercase;padding:16px 28px;border:0;border-radius:999px;text-decoration:none;cursor:pointer;transition:transform .3s,box-shadow .3s} .btn:hover{box-shadow:0 14px 30px rgba(255,85,5,.3)} .btn.line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)} .btn.line:hover{background:var(--ink);color:#fff} .ghost{display:inline-flex;align-items:center;gap:12px;color:var(--ink);font-weight:800;font-size:12px;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;background:none;border:0;cursor:pointer;font-family:var(--f);padding:0} .ghost i{display:block;width:44px;height:1px;background:currentColor;transition:width .35s} .ghost:hover i{width:70px} .chip{display:inline-block;border:1px solid var(--hair);border-radius:99px;padding:5px 14px;font-size:13px;color:var(--stone)} .chip.hot{border-color:var(--orange-ink);color:var(--orange-ink)} /* 4. NAVIGATION BAR — colours, shape, logo and links kept from Figma --- */ .nav{position:fixed;left:0;right:0;top:0;width:100%;z-index:30;padding-top:env(safe-area-inset-top,0px);transition:transform .45s var(--ease)} .nav.hide{transform:translateY(-110%)} .nav .bar{background:var(--grad);border-radius:0 0 14px 14px;box-shadow:0 6px 18px rgba(232,72,12,.18)} .nav .in{max-width:1280px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;transition:padding .35s} .nav.slim .in{padding-block:7px} .nav .logo img{width:170px;display:block;transition:width .35s} .nav.slim .logo img{width:132px} .nav ul{list-style:none;margin:0;padding:0;display:flex;gap:clamp(14px,2.6vw,38px);position:relative} .nav ul a{color:#fff;text-decoration:none;font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase;display:block;padding-block:6px} .nav ul a.on{color:var(--amber)} .nav .uline{position:absolute;bottom:0;height:2px;background:var(--amber);transition:left .35s,width .35s} .burger{display:none;background:none;border:1px solid rgba(255,255,255,.6);border-radius:99px;color:#fff;font:800 12px var(--f);letter-spacing:.14em;padding:8px 16px;cursor:pointer} /* phone menu: full-screen orange panel */ .mmenu{position:fixed;inset:0;z-index:29;background:var(--grad);display:grid;align-content:center;padding:100px 28px 40px;transform:translateY(-100%);transition:transform .6s var(--ease)} .mmenu.open{transform:none} .mmenu a{color:#fff;text-decoration:none;font-size:clamp(30px,8vw,48px);font-weight:200;line-height:1.35} .mmenu a.on{font-weight:900;color:var(--amber)} .inner{padding-top:96px} /* inner pages: room under the fixed nav */ /* 5. FOOTER — colours and content kept from Figma, compact height ---- */ .foot{background:var(--grad-foot);color:#fff;border-radius:14px 14px 0 0;position:relative;z-index:2;margin-top:-14px} /* top corners curve like the nav bar; tucks 14px over the section above so the corners show it */ .foot .in{max-width:1280px;margin:0 auto;padding:26px 24px 14px} .fg{display:grid;grid-template-columns:minmax(0,1.2fr) repeat(4,minmax(0,1fr));gap:20px} .fg h5{margin:0 0 8px;font-size:13px;font-weight:900;letter-spacing:.1em} .fg ul{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:13px} .fg a,.fb a{color:#fff;text-decoration:none;background:linear-gradient(#fff,#fff) 0 100%/0 1px no-repeat;transition:background-size .3s} .fg a:hover,.fb a:hover{background-size:100% 1px} .brand img{width:150px} .brand p{font-size:13px;margin-top:8px;max-width:30ch} .brand .hl{font-weight:800;font-size:13px;margin-top:8px} .fb{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;border-top:1px solid rgba(255,255,255,.25);margin-top:16px;padding-top:12px;font-size:12px} .fb .mid{font-weight:900;letter-spacing:.08em} .fstores{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:18px} .badges{display:flex;gap:12px;flex-wrap:wrap} .store{display:inline-flex;align-items:center;gap:10px;padding:7px 18px 7px 14px;border-radius:12px;border:1.5px solid rgba(255,255,255,.45);background:rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 6px 16px -8px rgba(120,30,0,.5);color:#fff;text-decoration:none;transition:background .3s,transform .3s} .store:hover{background:rgba(255,255,255,.24);transform:translateY(-2px)} .store span{display:grid;line-height:1.05} .store small{font-size:10px;font-weight:600;letter-spacing:.04em} .store b{font-size:17px;font-weight:800} .socials{display:flex;gap:10px;align-items:center} .socials a{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1.5px solid rgba(255,255,255,.45);background:rgba(255,255,255,.14);transition:background .3s} .socials a:hover{background:rgba(255,255,255,.28)} .fb .mid{display:inline-flex;align-items:center;gap:8px} .fb .legal{font-size:11px;font-weight:700;letter-spacing:.08em} /* 6. MOTION HELPERS ------------------------------------------------- */ /* .rv = reveal when scrolled into view (visible by default; JS hides only what is below the fold) */ .rv{transition:opacity 1s,transform 1s var(--ease)} .rv.pre{opacity:0;transform:translateY(34px)} /* .rv3d = reveal with a 3D swing */ .rv3d{transition:opacity 1.1s,transform 1.1s var(--ease);transform-origin:50% 100%} .rv3d.pre{opacity:0;transform:perspective(900px) rotateX(24deg) translateY(40px)} /* stagger children: add class "stagger" to a parent of .rv items */ .stagger>.rv:nth-child(2){transition-delay:.08s}.stagger>.rv:nth-child(3){transition-delay:.16s}.stagger>.rv:nth-child(4){transition-delay:.24s}.stagger>.rv:nth-child(5){transition-delay:.32s}.stagger>.rv:nth-child(6){transition-delay:.4s} /* [data-lit] = words light up and flip in as you scroll */ [data-lit]{perspective:900px} [data-lit] .w{display:inline-block;transform:rotateX(75deg) translateY(.25em);transform-origin:50% 100%;opacity:.28;color:var(--dim);transition:transform .7s var(--ease),opacity .7s,color .5s} [data-lit] .w.on{transform:none;opacity:1;color:var(--ink)} [data-lit] .w.k.on{font-weight:900} /* [data-tilt] = 3D tilt toward the mouse, with a light glare */ [data-tilt]{transform-style:preserve-3d;transition:transform .6s var(--ease);position:relative} [data-tilt] .glare{position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;background:radial-gradient(circle at var(--gx,50%) var(--gy,30%),rgba(255,255,255,.55),transparent 45%);opacity:0;transition:opacity .4s} [data-tilt]:hover .glare{opacity:1} /* cursor ring (desktop only) */ .cursor{position:fixed;z-index:90;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;border:1px solid var(--orange-ink);border-radius:50%;pointer-events:none;transition:width .3s,height .3s,margin .3s,background .3s;mix-blend-mode:multiply} .cursor.big{width:70px;height:70px;margin:-35px 0 0 -35px;background:rgba(255,85,5,.12)} /* page-load curtain (Home only) */ .loader{position:fixed;inset:0;z-index:100;background:var(--grad);display:grid;place-items:center;transition:transform 1.1s cubic-bezier(.76,0,.24,1)} .loader img{width:min(320px,60vw);opacity:0;transform:translateY(20px) scale(.96);animation:lg 1s .1s forwards} .loader i{position:absolute;left:50%;bottom:22%;width:120px;height:2px;margin-left:-60px;background:rgba(255,255,255,.3);overflow:hidden} .loader i::after{content:"";position:absolute;inset:0;background:#fff;transform:translateX(-100%);animation:ld 1.1s .2s forwards} .loader.up{transform:translateY(-100%)} @keyframes lg{to{opacity:1;transform:none}} @keyframes ld{to{transform:none}} /* scrolling name band */ .marq{overflow:hidden;white-space:nowrap;border-block:1px solid var(--hair);padding-block:18px} .marq div{display:inline-block;animation:mq 40s linear infinite;font-size:clamp(22px,3vw,40px);font-weight:200;letter-spacing:.02em} .marq b{font-weight:900} .marq i{font-style:normal;color:var(--champ);margin-inline:28px} @keyframes mq{to{transform:translateX(-50%)}} /* 7. PAGE HERO (top of every inner page) ----------------------------- */ .phero{position:relative;padding-block:clamp(70px,9vw,120px) clamp(50px,7vw,90px);overflow:hidden} .phero .ghostword{position:absolute;right:-2vw;top:30px;font-size:clamp(110px,20vw,300px);font-weight:900;line-height:.8;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px var(--hair);pointer-events:none;user-select:none;white-space:nowrap} .phero .grid{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(30px,6vw,90px);align-items:center} .phero h1{font-size:clamp(42px,6.4vw,96px);margin-top:20px} .phero .lead{margin-top:22px} .phero .actions{display:flex;gap:26px;align-items:center;flex-wrap:wrap;margin-top:32px} .phero h1 .ln{display:block;overflow:hidden;padding-bottom:.06em} .phero h1 .ln>span{display:inline-block;transform:translateY(110%);transition:transform 1.2s var(--ease)} .ready .phero h1 .ln>span{transform:none} .ready .phero h1 .ln:nth-child(2)>span{transition-delay:.1s} .ready .phero h1 .ln:nth-child(3)>span{transition-delay:.2s} /* stage = a soft spotlight box that shows a product cut-out */ .stage{position:relative;aspect-ratio:5/4;max-width:100%;border-radius:6px;overflow:hidden;background:radial-gradient(ellipse at 50% 70%,var(--raise) 0%,var(--ground) 72%);display:grid;place-items:center} .stage::before{content:"";position:absolute;inset:auto 20% 8% 20%;height:40%;background:radial-gradient(ellipse at 50% 100%,rgba(255,120,0,.16),transparent 70%)} .stage::after{content:"";position:absolute;left:14%;right:14%;bottom:12%;height:16px;border-radius:50%;background:rgba(0,0,0,.2);filter:blur(14px)} .stage img{position:relative;z-index:1;max-width:86%;max-height:82%} .stage.photo img{max-width:none;max-height:none;width:100%;height:100%;object-fit:cover} .stage.photo::after,.stage.photo::before{display:none} /* 8. CONTENT BLOCKS ------------------------------------------------- */ .split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,6vw,90px);align-items:start} .split.center{align-items:center} .sticky-side{position:sticky;top:120px} .grid-2,.grid-3,.grid-4{display:grid;gap:clamp(16px,2vw,24px)} .grid-2{grid-template-columns:repeat(2,minmax(0,1fr))} .grid-3{grid-template-columns:repeat(3,minmax(0,1fr))} .grid-4{grid-template-columns:repeat(4,minmax(0,1fr))} /* hairline card */ .lux{background:var(--raise);border:1px solid var(--hair);border-radius:16px;padding:clamp(22px,2.6vw,34px);display:flex;flex-direction:column;gap:12px} .lux h3{font-size:clamp(22px,2vw,28px);font-weight:800;letter-spacing:-.01em} .lux p{color:var(--stone);font-size:15px} .lux .n{font-size:13px;font-weight:800;letter-spacing:.24em;color:var(--champ)} .lux.hot{background:var(--grad);border-color:transparent;color:#fff} .lux.hot p,.lux.hot .n{color:#fff;opacity:.92} /* numbered row list (editorial) */ .rows{border-top:1px solid var(--hair)} .row{display:grid;grid-template-columns:90px minmax(0,1fr) minmax(0,1.2fr);gap:24px;padding:26px 0;border-bottom:1px solid var(--hair);align-items:baseline;transition:padding .4s} .row:hover{padding-left:12px} .row .n{font-size:13px;font-weight:800;letter-spacing:.24em;color:var(--champ)} .row h3{font-size:clamp(22px,2.2vw,30px);font-weight:800;letter-spacing:-.01em} .row p{color:var(--stone);font-size:15px} /* outline numbers / stats */ .outline{color:transparent;-webkit-text-stroke:1px var(--champ);font-weight:200} .stat{display:grid;gap:6px;border-top:1px solid var(--hair);padding-top:18px} .stat .v{font-size:clamp(44px,5.4vw,76px);font-weight:200;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums} .stat .v small{font-size:.4em;font-weight:800;color:var(--champ);margin-left:4px} .stat .k{font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--stone)} /* luxury table */ .tbl-wrap{overflow-x:auto;border:1px solid var(--hair);border-radius:16px;background:var(--raise)} .tbl{width:100%;border-collapse:collapse;font-size:15px;min-width:560px} .tbl th,.tbl td{text-align:left;padding:16px 22px;border-bottom:1px solid var(--hair);vertical-align:top} .tbl th{font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--champ)} .tbl tr:last-child td{border-bottom:0} .tbl td:first-child{color:var(--stone)} .tbl .hl{color:var(--orange-ink);font-weight:800} /* check list */ .ticks{list-style:none;margin:0;padding:0;display:grid;gap:10px} .ticks li{display:flex;gap:12px;align-items:baseline} .ticks li::before{content:"";flex:0 0 14px;height:1px;background:var(--orange-ink);transform:translateY(-4px)} /* legal text */ .prose{max-width:74ch} .prose h2{font-size:clamp(24px,2.4vw,32px);font-weight:800;letter-spacing:-.01em;margin:48px 0 14px} .prose h3{font-size:19px;font-weight:800;margin:26px 0 10px} .prose p,.prose li{color:#4d4741;font-size:16px} .prose p+p{margin-top:12px} .prose ul{padding-left:20px;display:grid;gap:6px} .toc{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:14px} .toc a{color:var(--stone);text-decoration:none} .toc a:hover,.toc a.on{color:var(--orange-ink)} /* 9. FORMS ---------------------------------------------------------- Clean and readable: each field is a soft white box with a plain label above it. The box glows orange when you click into it. */ .form{display:grid;gap:26px} .fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 24px} .field{display:grid;gap:8px;min-width:0;align-content:start} .field.full{grid-column:1/-1} .field label,.field .lbl{font-size:15px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--ink)} .field label small,.field .lbl small{font-weight:400;color:var(--stone);font-size:13px} .field input,.field select,.field textarea{width:100%;font:16px/1.4 var(--f);color:var(--ink);background:#fff;border:1px solid var(--hair);padding:14px 16px;border-radius:12px;box-shadow:0 1px 2px rgba(25,23,21,.04);transition:border-color .25s,box-shadow .25s} .field input::placeholder,.field textarea::placeholder{color:#a69c91} .field select{appearance:none;-webkit-appearance:none;padding-right:42px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23e8480c' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 16px center} .field textarea{min-height:130px;resize:vertical} .field input:hover,.field select:hover,.field textarea:hover{border-color:#c9bba8} .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--orange-ink);box-shadow:0 0 0 4px rgba(232,72,12,.12)} .field .hint{font-size:13px;color:var(--stone)} .opts{display:flex;flex-wrap:wrap;gap:10px} .opt{position:relative} .opt input{position:absolute;opacity:0;pointer-events:none} .opt span{display:inline-block;border:1px solid var(--hair);border-radius:12px;padding:11px 18px;font-size:15px;cursor:pointer;transition:all .25s;background:#fff;color:var(--ink)} .opt span:hover{border-color:#c9bba8} .opt input:checked+span{background:#fff4ec;color:var(--orange-ink);border-color:var(--orange-ink);font-weight:700;box-shadow:0 0 0 3px rgba(232,72,12,.1)} .opt input:focus-visible+span{outline:2px solid var(--orange-ink);outline-offset:2px} .drop{border:1.5px dashed #d8c4a8;border-radius:14px;padding:26px;text-align:center;color:var(--stone);font-size:15px;background:#fff} /* a light panel used instead of black boxes (sidebars, summaries) */ .soft{background:linear-gradient(160deg,#fff 0%,#fbf6f0 100%);border:1px solid var(--hair);border-radius:18px;box-shadow:0 30px 60px -40px rgba(120,80,40,.35)} /* step bar for multi-step forms */ .steps{display:flex;gap:6px;list-style:none;margin:0;padding:0} .steps li{flex:1;display:grid;gap:8px;font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--stone)} .steps li::before{content:"";height:2px;background:var(--hair);border-radius:2px} .steps li.done::before,.steps li.on::before{background:var(--grad)} .steps li.on{color:var(--ink)} .note{font-size:14px;color:var(--stone)} /* 10. FAQ ACCORDION ------------------------------------------------- */ .faq details{border-bottom:1px solid var(--hair)} .faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:22px 0;font-size:clamp(18px,1.6vw,22px);font-weight:700} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";font-weight:200;font-size:30px;line-height:1;color:var(--orange-ink);transition:transform .4s var(--ease)} .faq details[open] summary::after{transform:rotate(45deg)} .faq .ans{padding:0 0 24px;color:#4d4741;display:grid;gap:12px;max-width:72ch;font-size:16px} /* 11. CLOSING SCENE (dark image band before the footer) ------------- */ .close{position:relative;min-height:60vh;display:grid;align-items:end;overflow:hidden;background:#000;color:#fff} .close>img{position:absolute;inset:-8% 0 0 0;width:100%;height:116%;object-fit:cover;opacity:.75;transform-origin:50% 60%} .close::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.82),rgba(0,0,0,.05) 60%)} .close .wrap{position:relative;z-index:1;padding-block:80px;display:grid;gap:22px;width:100%} .close h2{font-size:clamp(42px,6.6vw,104px);max-width:13ch;transform-origin:0 100%} .close .label{color:#e9d6b4}.close .label::before{background:#e9d6b4} .close .ghost{color:#fff} .close .lead{color:#e4dcd2} /* 12. PHONE LAYOUT -------------------------------------------------- */ @media (max-width:960px){ .nav ul{display:none}.burger{display:block} .phero .grid,.split{grid-template-columns:1fr} .sticky-side{position:static} .grid-3,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))} .row{grid-template-columns:60px minmax(0,1fr)}.row p{grid-column:2} .fg{grid-template-columns:repeat(2,minmax(0,1fr))}.brand{grid-column:1/-1} } @media (max-width:560px){ .grid-2,.grid-3,.grid-4,.fields{grid-template-columns:1fr} .steps li{font-size:0} } @media (pointer:coarse){.cursor{display:none}} @media (prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important} html{scroll-behavior:auto} .loader{display:none} [data-lit] .w{transform:none;opacity:1;color:var(--ink)} .phero h1 .ln>span{transform:none} } :focus-visible{outline:2px solid var(--orange-ink);outline-offset:3px} .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* ===================================================================== 13. CINEMA KIT — big real photography that moves with the scroll. Use these on every page so each screen has one strong picture and only a few words. (JS for them is in site.js, part 4b.) ===================================================================== */ /* 13a. Cinema hero: a photo that opens from a rounded window to full screen */ .cine{position:relative;height:150vh;margin-top:-96px} .cine-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;align-items:end} .cine-media{position:absolute;inset:0;clip-path:inset(14% 8% 10% 8% round 28px);will-change:clip-path} .cine-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.18);will-change:transform} .cine-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,12,6,.7) 0%,rgba(20,12,6,.35) 40%,rgba(20,12,6,0) 65%),linear-gradient(0deg,rgba(20,12,6,.6) 0%,rgba(20,12,6,0) 50%)} .cine-copy{position:relative;z-index:2;width:100%;padding-bottom:clamp(50px,9vh,100px);color:#fff} .cine-copy .label{color:#f1dcb8}.cine-copy .label::before{background:#f1dcb8} .cine-copy h1{font-size:clamp(44px,6.4vw,108px);font-weight:200;line-height:.98;letter-spacing:-.02em;margin-top:18px;max-width:14ch} .cine-copy h1 b{font-weight:900} .cine-copy .lead{color:rgba(255,255,255,.86);margin-top:22px;max-width:46ch} .cine-copy .lead,.cine-copy .label,.cine-copy h1{transition:opacity 1s,transform 1.2s var(--ease)} .cine:not(.open) .cine-copy>*{opacity:0;transform:translateY(30px)} .cine .meta{position:absolute;right:clamp(20px,5vw,64px);bottom:clamp(50px,9vh,100px);z-index:2;color:rgba(255,255,255,.8);font-size:12px;font-weight:800;letter-spacing:.3em;text-transform:uppercase;writing-mode:vertical-rl} /* 13b. Big statement with photos floating around it */ .statement{position:relative;min-height:80vh;display:grid;place-items:center;text-align:center;overflow:hidden;padding-block:12vh} .statement p.big{position:relative;z-index:2;font-size:clamp(34px,4.8vw,78px);font-weight:200;line-height:1.12;max-width:20ch;margin-inline:auto} .statement .label{justify-content:center;margin-bottom:28px} .statement .float{position:absolute;z-index:1;border-radius:18px;overflow:hidden;box-shadow:0 40px 80px -40px rgba(60,35,15,.45)} .statement .float img{width:100%;height:100%;object-fit:cover;display:block} /* 13c. Reveal: a photo that opens up as it reaches the middle of the screen */ [data-reveal]{overflow:hidden;border-radius:22px;clip-path:inset(10% 10% 10% 10% round 22px);will-change:clip-path} [data-reveal] img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.2);will-change:transform} /* 13d. Scenes: a pinned story. The photo on the right changes as you scroll, the words on the left change with it. One scene per screen. */ .scenes{position:relative} .scenes-pin{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:center;overflow:hidden} .scenes-copy{position:relative;padding-inline:clamp(20px,5vw,80px) clamp(20px,4vw,60px);height:60vh} .scenes-copy article{position:absolute;inset:0 clamp(20px,4vw,60px) 0 clamp(20px,5vw,80px);display:grid;align-content:center;gap:18px;opacity:0;transform:translateY(40px);transition:opacity .8s,transform 1s var(--ease);pointer-events:none} .scenes-copy article.on{opacity:1;transform:none;pointer-events:auto} .scenes-copy .n{font-size:clamp(70px,8vw,130px);font-weight:200;line-height:.9;color:transparent;-webkit-text-stroke:1px var(--champ)} .scenes-copy h3{font-size:clamp(32px,3.4vw,54px);font-weight:200;line-height:1.05} .scenes-copy h3 b{font-weight:900} .scenes-copy p{color:#4d4741;font-size:18px;max-width:34ch} .scenes-media{position:relative;height:calc(100% - 140px);margin:110px clamp(16px,3vw,40px) 30px 0;border-radius:26px;overflow:hidden} .scenes-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.12);transition:opacity 1.1s,transform 2.4s var(--ease)} .scenes-media img.on{opacity:1;transform:scale(1)} .scenes-bar{position:absolute;left:clamp(20px,5vw,80px);bottom:40px;display:flex;align-items:center;gap:16px;font-size:12px;font-weight:800;letter-spacing:.2em;color:var(--champ)} .scenes-bar i{display:block;width:140px;height:1px;background:var(--hair);position:relative} .scenes-bar i b{position:absolute;left:0;top:0;height:1px;background:var(--orange-ink);width:0} /* 13e. Horizontal gallery: scrolling down moves big photo panels sideways */ .hgal{position:relative} .hgal-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr);align-content:center;gap:clamp(24px,4vh,44px)} .hgal-track{display:flex;gap:clamp(18px,2.4vw,36px);padding-inline:clamp(20px,5vw,64px);will-change:transform} .hgal-item{flex:0 0 clamp(260px,30vw,460px);display:grid;gap:16px} .hgal-item .ph{aspect-ratio:4/3;border-radius:20px;overflow:hidden} .hgal-item .ph img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 1.2s var(--ease)} .hgal-item:hover .ph img{transform:scale(1.02)} .hgal-item small{font-size:12px;font-weight:800;letter-spacing:.24em;color:var(--champ)} .hgal-item h3{font-size:clamp(24px,2.2vw,34px);font-weight:300} .hgal-item h3 b{font-weight:900} .hgal-item p{color:#4d4741;font-size:16px;max-width:40ch} /* 13f. Photo links: big image cards that lead to the next page */ .plinks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px)} .plink{position:relative;display:block;aspect-ratio:3/4;border-radius:22px;overflow:hidden;color:#fff;text-decoration:none} .plink img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)} .plink::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(20,12,6,.78),rgba(20,12,6,0) 55%)} .plink:hover img{transform:scale(1.06)} .plink div{position:absolute;left:28px;right:28px;bottom:28px;z-index:1;display:grid;gap:8px} .plink small{font-size:11px;font-weight:800;letter-spacing:.3em;color:#f1dcb8} .plink b{font-size:clamp(24px,2.2vw,34px);font-weight:300;line-height:1.1} .plink span{font-size:13px;font-weight:800;letter-spacing:.16em;text-transform:uppercase} /* 13g. Simple roomy section head, centred */ .chead{text-align:center;display:grid;justify-items:center;gap:22px;margin-bottom:clamp(50px,8vh,90px)} .chead .label::after{content:"";width:36px;height:1px;background:var(--champ)} .chead h2{font-size:clamp(38px,5.2vw,84px);font-weight:200;line-height:1.02;max-width:16ch} .chead h2 b{font-weight:900} .chead p{color:var(--stone);font-size:18px;max-width:52ch} .roomy{padding-block:clamp(70px,11vh,120px)} @media (max-width:860px){ .cine{height:auto;margin-top:-96px} .cine-pin{position:relative;height:92vh;height:92svh} .cine-media{clip-path:none} .cine .meta{display:none} .statement{min-height:auto;padding-block:110px} .statement .float{display:none} .scenes{height:auto!important} .scenes-pin{position:relative;height:auto;grid-template-columns:1fr;display:block} .scenes-media{display:none} .scenes-copy{height:auto;padding:0 20px} .scenes-copy article{position:relative;inset:auto;opacity:1;transform:none;padding-block:40px;border-top:1px solid var(--hair)} .scenes-copy article::before{content:"";display:block;aspect-ratio:4/3;border-radius:18px;background:var(--img) center/cover} .scenes-bar{display:none} .hgal{height:auto!important} .hgal-pin{position:relative;height:auto;padding-block:60px} .hgal-track{transform:none!important;overflow-x:auto;scroll-snap-type:x mandatory} .hgal-item{flex-basis:80vw;scroll-snap-align:start} .plinks{grid-template-columns:1fr} .plink{aspect-ratio:4/3} [data-reveal]{clip-path:none!important} } /* 14. ONE TYPE SCALE FOR EVERY INNER PAGE (Home keeps its own) ---------- hiruni asked for the same font sizes on every page except Home. ":root body:not([data-page=home]) main" is a long selector on purpose: it is "stronger" than the small rules inside each page's own