/* ========================================================================== MIGHTY ARCHIE / agatraindo.com Design system — edit colours + type here and every page updates. ========================================================================== */ :root{ /* ---- BRAND COLOURS ---- --ink = TEXT. It is black, and it stays black. --panel = the big colour blocks (Mission/Vision, Facility, footer). These used to be the same variable, which is why making the text brown also made the boxes brown. They are separate now. */ --yellow: #FEC152; /* Mighty Archie yellow — the main colour */ --yellow-deep: #E9A32A; /* darker yellow for hovers + shadows */ --ink: #000000; /* BLACK — all text, buttons, badges */ --panel: #4FC5D4; /* the blue block colour */ --cream: #F0E9DE; /* the one off-white used across the site */ --paper: #F0E9DE; /* was white — now matches cream */ --red: #EF5452; /* brand red */ --teal: #4FC5D4; /* brand teal (same as --panel) */ --choc: #4A2C1A; /* ChocoLoco brown */ --line: rgba(0,0,0,.14); /* ---- SDG OFFICIAL COLOURS ---- */ --sdg5:#FF3A21; --sdg8:#A21942; --sdg9:#FD6925; --sdg12:#BF8B2E; --sdg13:#3F7E44; --sdg17:#19486A; /* ---- LAYOUT ---- */ --pad: clamp(20px, 5vw, 72px); --maxw: 1440px; --nav-h: 82px; --ease: cubic-bezier(.22,1,.36,1); /* ---- SPACING SYSTEM ---------------------------------------------- Change a value here and it updates everywhere. Nothing sets its own padding or corner radius — that is what keeps the page consistent. */ --space-section: clamp(34px, 4.5vw, 64px); /* top + bottom of every section */ --space-head: clamp(16px, 2.2vw, 28px); /* heading block -> its content */ --space-stack: clamp(10px, 1.2vw, 16px); /* between blocks inside a card */ --card-pad: clamp(16px, 1.8vw, 24px); /* inside EVERY box on the site */ --radius: 20px; /* EVERY box corner */ --radius-sm: 14px; /* small chips + thumbnails */ --gap: clamp(12px, 1.6vw, 22px); /* between grid columns */ } /* ---------- BRAND FONT: MADE Tommy Soft ---------- Used for headings, buttons and labels. Body copy and the technical tables stay in DM Sans, which is easier to read at small sizes. */ @font-face{font-family:'Tommy Soft';src:url('fonts/TommySoft-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Tommy Soft';src:url('fonts/TommySoft-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:'Tommy Soft';src:url('fonts/TommySoft-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:'Tommy Soft';src:url('fonts/TommySoft-ExtraBold.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap} @font-face{font-family:'Tommy Soft';src:url('fonts/TommySoft-Black.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap} /* DM Sans is the body face — loaded from Google Fonts in each page's . It has a complete character set (em-dash, %, °, &, accents, Indonesian), so nothing gets silently substituted mid-sentence the way it did before. */ :root{ --font-display:'Tommy Soft','DM Sans',system-ui,sans-serif; --font-body:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif; } /* ---------- RESET ---------- */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ font-family:var(--font-body); font-synthesis:none; background:var(--cream); color:var(--ink); font-size:18px; line-height:1.62; overflow-x:hidden; -webkit-font-smoothing:antialiased; } img{max-width:100%;display:block;height:auto} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:none;cursor:pointer} ul{list-style:none} ::selection{background:var(--ink);color:var(--yellow)} /* ---------- TYPE SCALE ---------- */ .display{ font-family:var(--font-display); font-weight:900; line-height:.9; letter-spacing:-.02em; text-transform:uppercase; } .d1{font-size:clamp(3rem, 11.5vw, 10.5rem)} .d2{font-size:clamp(2.4rem, 7.5vw, 6.4rem)} .d3{font-size:clamp(1.9rem, 4.6vw, 3.6rem)} .d4{font-size:clamp(1.35rem, 2.6vw, 2.1rem)} .lead{font-size:clamp(1.14rem,1.9vw,1.55rem);line-height:1.5;font-weight:500} .eyebrow{ font-family:var(--font-display); font-size:.72rem; font-weight:800; letter-spacing:.22em; text-transform:uppercase; display:inline-block; } .small{font-size:.95rem;line-height:1.55} /* ---------- HELPERS ---------- */ .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)} .section{padding-block:var(--space-section);position:relative} .bg-yellow{background:var(--yellow)} .bg-cream {background:var(--cream)} /* .bg-ink is the big colour block. It is BLUE now, with black text on it. */ .bg-ink {background:var(--panel);color:var(--ink)} .bg-teal {background:var(--teal)} .bg-paper {background:var(--paper)} .bg-ink .muted, .bg-teal .muted{opacity:.72} .muted{opacity:.66} .center{text-align:center} .grid{display:grid;gap:var(--gap)} .g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)} .rule{height:2px;background:currentColor;opacity:.16;border:0;margin-block:clamp(28px,5vw,56px)} /* ---------- PLACEHOLDER STYLING ---------- Anything you still need to write shows up outlined. Delete class="ph" once you've written the real text. */ /* NOTE: no display property here on purpose — setting one breaks table cells */ .ph{ background:rgba(224,57,43,.10); outline:2px dashed rgba(224,57,43,.55); outline-offset:-1px; border-radius:3px; } span.ph, a.ph, b.ph{padding:0 .18em;outline-offset:2px} .ph-block{ display:block; background:rgba(224,57,43,.07); outline:2px dashed rgba(224,57,43,.5); outline-offset:4px; border-radius:var(--radius); padding:var(--card-pad); margin-block:.4em; } .ph-photo{ display:flex;align-items:center;justify-content:center;text-align:center; aspect-ratio:4/3; border-radius:var(--radius); padding:var(--card-pad); background:repeating-linear-gradient(45deg,rgba(0,0,0,.05) 0 12px,transparent 12px 24px); outline:2px dashed rgba(0,0,0,.35); outline-offset:-8px; font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.65; } /* ---------- BUTTONS ---------- */ .btn{ font-family:var(--font-display); display:inline-flex;align-items:center;gap:.6em; padding:.95em 1.7em;border-radius:100px; font-weight:800;font-size:.94rem;letter-spacing:.02em;text-transform:uppercase; background:var(--ink);color:var(--cream); transition:transform .35s var(--ease), background .25s, color .25s, box-shadow .35s var(--ease); will-change:transform; } .btn:hover{transform:translateY(-3px);box-shadow:0 12px 0 -4px rgba(0,0,0,.22)} .btn:active{transform:translateY(0)} .btn-yellow{background:var(--yellow);color:var(--ink)} .btn-yellow:hover{background:var(--paper)} .btn-outline{background:transparent;color:inherit;box-shadow:inset 0 0 0 2px currentColor} .btn-outline:hover{background:var(--ink);color:var(--yellow);box-shadow:none} .btn .ar{transition:transform .35s var(--ease)} .btn:hover .ar{transform:translateX(4px)} /* ---------- NAV ---------- */ .nav{ position:fixed;top:0;left:0;right:0;z-index:130; height:var(--nav-h);display:flex;align-items:center; background:transparent;transition:background .4s var(--ease), box-shadow .4s var(--ease); } .nav.stuck{background:var(--cream);box-shadow:0 1px 0 var(--line)} .nav.stuck.on-yellow{background:var(--yellow)} /* over the hero photograph the nav is light; it flips back when stuck */ .nav.on-photo:not(.stuck){color:var(--cream)} /* a soft fade behind the NAV BAR ONLY (82px tall) so the links stay readable — the hero photograph itself is left untinted */ .nav.on-photo:not(.stuck)::before{ content:'';position:absolute;inset:0;z-index:-1;pointer-events:none; background:linear-gradient(to bottom, rgba(0,0,0,.5), rgba(0,0,0,0)); } /* The white logo is hidden EVERYWHERE by default and only revealed over the hero photo. Scoping it to .on-photo alone left both logos stacked on the inner pages, which have no .on-photo class. */ .logo .light{display:none} .nav.on-photo:not(.stuck) .logo .dark{display:none} .nav.on-photo:not(.stuck) .logo .light{display:block} .nav-in{ width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad); display:flex;align-items:center;gap:clamp(16px,2.4vw,30px); } /* ---- LOGO ---- */ .logo{display:inline-block;line-height:0} .logo img{height:clamp(34px,4.4vw,46px);width:auto;display:block} .foot .logo.logo-lg img{height:clamp(58px,6vw,74px)} /* product wordmark logos on the Products page */ .prod-logo{margin-block:.35em .5em;line-height:0} .prod-logo img{ width:100%;max-width:min(100%,460px);height:auto; filter:drop-shadow(0 3px 0 rgba(0,0,0,.10)); } /* margin-left:auto pushes the whole link group over to sit beside the language toggle, instead of floating in the middle of the bar. */ .nav-links{display:flex;align-items:center;gap:clamp(14px,2vw,30px);margin-left:auto} /* Home lives on the logo, so its tab is hidden but still in the markup */ .nav-links a[href="index.html"], .drawer a[href="index.html"]{display:none} .nav-links a{ font-family:var(--font-display); font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em; position:relative;padding-block:4px; } .nav-links a::after{ content:'';position:absolute;left:0;bottom:0;height:2px;width:100%; background:currentColor;transform:scaleX(0);transform-origin:right; transition:transform .4s var(--ease); } .nav-links a:hover::after,.nav-links a[aria-current]::after{transform:scaleX(1);transform-origin:left} .nav-right{display:flex;align-items:center;gap:14px} /* language toggle */ .lang{display:flex;align-items:center;border:2px solid currentColor;border-radius:100px;overflow:hidden} .lang button{ padding:.32em .72em;font-size:.72rem;font-weight:800;letter-spacing:.06em; transition:background .25s,color .25s; } .lang button[aria-pressed="true"]{background:var(--ink);color:var(--yellow)} /* mobile */ .burger{display:none;width:38px;height:38px;position:relative;z-index:120} .burger i{ position:absolute;left:7px;right:7px;height:2.5px;background:currentColor;border-radius:2px; transition:transform .4s var(--ease),opacity .25s; } .burger i:nth-child(1){top:13px} .burger i:nth-child(2){top:22px} .burger.open i:nth-child(1){transform:translateY(4.5px) rotate(45deg)} .burger.open i:nth-child(2){transform:translateY(-4.5px) rotate(-45deg)} .drawer{ position:fixed;inset:0;z-index:110;background:var(--yellow); display:flex;flex-direction:column;justify-content:center;gap:6px; padding:var(--pad); clip-path:circle(0% at calc(100% - 40px) 34px); transition:clip-path .7s var(--ease);pointer-events:none; } .drawer.open{clip-path:circle(150% at calc(100% - 40px) 34px);pointer-events:auto} .drawer a{ font-family:var(--font-display); font-weight:900;text-transform:uppercase;letter-spacing:-.02em; font-size:clamp(2rem,10vw,3.4rem);line-height:1.05; opacity:0;transform:translateY(18px);transition:opacity .5s var(--ease),transform .5s var(--ease); } .drawer.open a{opacity:1;transform:none} .drawer.open a:nth-child(1){transition-delay:.16s} .drawer.open a:nth-child(2){transition-delay:.22s} .drawer.open a:nth-child(3){transition-delay:.28s} .drawer.open a:nth-child(4){transition-delay:.34s} /* ---------- HERO ---------- */ .hero{ min-height:100svh; background:#000 url('img/hero-shot.jpg') center right/cover no-repeat; color:var(--cream); display:flex;align-items:center;position:relative;overflow:hidden; padding-top:var(--nav-h); } /* NO overlay on the photo — the shot shows in its original colours. The headline stays readable via its own shadow instead of a tint. */ .hero > .wrap{position:relative;z-index:1} .hero h1, .hero-sub, .scroll-cue{ text-shadow:0 2px 18px rgba(0,0,0,.62), 0 1px 4px rgba(0,0,0,.5); } .hero .btn{background:var(--yellow);color:var(--ink)} .hero .btn:hover{background:var(--paper)} .hero .btn-outline{background:transparent;color:var(--cream);box-shadow:inset 0 0 0 2px currentColor} .hero .btn-outline:hover{background:var(--cream);color:var(--ink);box-shadow:none} .hero-grid{ display:grid;grid-template-columns:minmax(0,1fr);align-items:center; gap:var(--gap);width:100%; } .hero-img{display:none} /* "REAL VANILLA." is one unbreakable line, so the hero headline gets its own size — the shared .d1 scale is too wide to fit beside the product shot. */ .hero h1{ font-size:clamp(2.3rem, 6vw, 6.2rem);max-width:14ch; margin-block:.12em .45em; } .hero-copy{max-width:none} .hero-sub{max-width:40ch;font-weight:500;opacity:.92} .hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(20px,3vw,32px)} .hero-img{position:relative;display:flex;justify-content:center;align-items:flex-end} .hero-img img{ width:auto;max-width:100%;height:auto;max-height:min(68vh,600px); filter:drop-shadow(0 26px 34px rgba(0,0,0,.24)); will-change:transform; } .scroll-cue{ position:absolute;right:var(--pad);bottom:26px; display:flex;align-items:center;gap:10px; font-size:.7rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase; opacity:.75;pointer-events:none; } /* on short screens the hero buttons reach the bottom — drop the cue */ @media (max-height:820px){.scroll-cue{display:none}} .scroll-cue .bar{width:44px;height:2px;background:currentColor;position:relative;overflow:hidden} .scroll-cue .bar::after{ content:'';position:absolute;inset:0;background:var(--yellow); animation:swipe 1.9s var(--ease) infinite; } @keyframes swipe{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}} /* hero image placeholder — sized so the layout matches the real photo */ .hero-ph{ aspect-ratio:16/10; border-radius:var(--radius); line-height:1.6; font-size:.72rem; letter-spacing:.04em; text-transform:none; font-weight:600; opacity:.8; background:repeating-linear-gradient(45deg,rgba(0,0,0,.055) 0 14px,transparent 14px 28px); outline-color:rgba(0,0,0,.4); } .hero-ph strong{font-weight:900} .hero-ph em{font-style:normal;text-decoration:underline} /* halo behind hero product */ .halo{display:none; position:absolute;width:64vmin;height:64vmin;border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.55),transparent 68%); right:2%;top:50%;transform:translateY(-50%);pointer-events:none; } /* ---------- INTRO SPLIT ---------- Yellow copy panel on the left, photo bleeding off the right edge. The left padding keeps the headline aligned with every other section's text even though the section itself runs full width. */ /* make-it-good.jpg has ~176px of black baked into each side, so its real picture content is 1153x905, a ratio of 1.27, not the 1.66 the file claims. object-fit:cover only hides those bars while the visible box stays at or below 1.27. Both the column share (37.5%) and the min-height (30vw) scale with the viewport, so the box sits at ~1.25 at every width and the black never comes into view. Widen the photo column and the bars reappear. */ .intro-split{ display:grid;grid-template-columns:minmax(0,1.667fr) minmax(0,1fr);align-items:stretch; background:var(--yellow); min-height:clamp(300px,30vw,1100px); } .intro-copy{ display:flex;flex-direction:column;justify-content:center; padding-block:clamp(30px,3.2vw,56px); padding-right:clamp(24px,4vw,64px); padding-left:max(var(--pad), calc((100vw - var(--maxw)) / 2 + var(--pad))); } .intro-copy .lead{margin-top:clamp(14px,1.8vw,26px);max-width:54ch} .intro-photo{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block} @media (max-width:860px){ .intro-split{grid-template-columns:1fr} .intro-copy{padding-inline:var(--pad)} .intro-photo{height:clamp(220px,52vw,380px)} } /* ---------- MARQUEE ---------- */ .marquee{ background:var(--ink);color:var(--yellow); padding-block:.7em;overflow:hidden;white-space:nowrap; border-block:3px solid var(--ink); } .marquee.inv{background:var(--yellow);color:var(--ink)} .marquee-track{display:inline-flex;gap:0;animation:slide 34s linear infinite;will-change:transform} .marquee:hover .marquee-track{animation-play-state:paused} .marquee span{ font-family:var(--font-display); font-weight:900;text-transform:uppercase;letter-spacing:-.01em; font-size:clamp(1.1rem,2.6vw,2rem);padding-inline:.5em; display:inline-flex;align-items:center;gap:.5em; } .marquee span::after{content:'✦';font-size:.55em;opacity:.7} @keyframes slide{to{transform:translateX(-50%)}} /* ---------- CLIENT WALL ---------- */ .clients{overflow:hidden;padding-block:clamp(10px,2vw,18px)} .clients-row{ display:flex;gap:clamp(10px,1.4vw,18px);width:max-content; animation:clientscroll 62s linear infinite;will-change:transform; } .clients-row.rev{animation-direction:reverse;animation-duration:74s} .clients:hover .clients-row{animation-play-state:paused} .clients-row img{ width:clamp(96px,11vw,148px);aspect-ratio:1;object-fit:cover; border-radius:var(--radius-sm);flex:none; /* hairline keeps white-background logos from vanishing into the page */ box-shadow:inset 0 0 0 1px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.06); transition:transform .45s var(--ease), box-shadow .45s var(--ease); } .clients-row img:hover{transform:translateY(-6px) scale(1.04);box-shadow:0 14px 30px rgba(0,0,0,.22)} @keyframes clientscroll{to{transform:translateX(-50%)}} @media (prefers-reduced-motion:reduce){.clients-row{animation:none}} /* ---------- SCROLL REVEAL ---------- */ .rv{opacity:0;transform:translateY(22px);transition:opacity .55s var(--ease),transform .55s var(--ease)} .rv.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ .rv{opacity:1;transform:none;transition:none} .marquee-track{animation:none} html{scroll-behavior:auto} } /* ---------- STATS ---------- */ .stat{border-top:3px solid currentColor;padding-top:16px} .stat b{ font-family:var(--font-display); display:block;font-weight:900;line-height:1;letter-spacing:-.04em; font-size:clamp(2.4rem,5.4vw,4.4rem); } .stat p{font-size:.82rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-top:8px;opacity:.72} /* ---------- MISSION / VISION ---------- */ .mv{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border:2px solid currentColor;border-radius:var(--radius);overflow:hidden} .mv > div{padding:var(--card-pad);text-align:center} .mv > div .lead{margin-inline:auto;max-width:34ch} .mv > div:first-child{border-right:2px solid currentColor} /* Archie lies along the top edge of the box, over the Mission half. The wrapper's top margin is what reserves room for him. */ .mv-wrap{position:relative;margin-top:clamp(72px,10vw,168px)} .mv-mascot{ position:absolute;left:clamp(10px,5%,72px);bottom:calc(100% - 3px); width:clamp(168px,26%,340px);height:auto;pointer-events:none;user-select:none; } @media (max-width:760px){ .mv-wrap{margin-top:clamp(60px,22vw,110px)} .mv-mascot{width:clamp(150px,46%,230px);left:8px} } /* ---------- CORE VALUES: A B C ---------- */ .abc{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)} .abc-card{ padding:var(--card-pad);border-radius:var(--radius);color:var(--ink); transition:transform .5s var(--ease), box-shadow .5s var(--ease); } .abc-card:nth-child(1){background:var(--yellow)} .abc-card:nth-child(2){background:var(--red);color:var(--cream)} .abc-card:nth-child(3){background:var(--teal)} .abc-card:hover{box-shadow:0 16px 34px rgba(0,0,0,.22)} .abc-card:hover{transform:translateY(-6px)} .abc-letter{ display:block;font-family:var(--font-display);font-weight:900; font-size:clamp(4.5rem,11vw,9.5rem);line-height:.78;letter-spacing:-.05em; margin-bottom:.08em; } .abc-word{ font-family:var(--font-display);font-weight:900;text-transform:uppercase; font-size:clamp(1.15rem,2.1vw,1.7rem);letter-spacing:-.01em;line-height:1; margin-bottom:.55em; } /* the shared first letter is drawn big above, so dim it in the word itself */ .abc-word em{font-style:normal;opacity:.42} .abc-card p{font-size:clamp(.94rem,1.15vw,1.05rem);line-height:1.5;max-width:34ch} @media (max-width:760px){ .abc{grid-template-columns:1fr;gap:28px} .abc-letter{font-size:4.5rem} } /* ---------- CORE VALUES (accordion — no longer used on Home) ---------- */ .values{border-top:3px solid var(--ink)} .val{border-bottom:3px solid var(--ink)} .val-head{ width:100%;display:flex;align-items:center;gap:clamp(14px,3vw,34px); padding-block:clamp(18px,2.6vw,30px);text-align:left; } .val-num{ font-weight:900;font-size:.82rem;letter-spacing:.1em;opacity:.5;min-width:2.4em; } .val-title{ font-family:var(--font-display); flex:1;font-weight:900;text-transform:uppercase;letter-spacing:-.025em;line-height:1; font-size:clamp(1.5rem,4.6vw,3.1rem); transition:transform .4s var(--ease); } .val:hover .val-title{transform:translateX(10px)} .val-plus{ width:34px;height:34px;border-radius:50%;flex:none;position:relative; box-shadow:inset 0 0 0 2.5px currentColor;transition:background .3s,transform .5s var(--ease); } .val-plus::before,.val-plus::after{ content:'';position:absolute;left:50%;top:50%;background:currentColor;border-radius:2px; transform:translate(-50%,-50%);transition:transform .45s var(--ease),opacity .3s; } .val-plus::before{width:13px;height:2.5px} .val-plus::after{width:2.5px;height:13px} .val.open .val-plus{transform:rotate(180deg);background:rgba(0,0,0,.08)} .val.open .val-plus::after{transform:translate(-50%,-50%) scaleY(0)} .val-body{ overflow:hidden;max-height:0;transition:max-height .55s var(--ease),opacity .4s var(--ease);opacity:0; } .val.open .val-body{max-height:340px;opacity:1} .val-body-in{padding:0 0 clamp(22px,3vw,34px) calc(2.4em + clamp(14px,3vw,34px))} .val-body-in p{max-width:58ch} /* ---------- SDG TILES ---------- */ /* "Mighty Archie's Commitment" is a long headline, so this block gets its own size cap and a wide column gap — the default --gap left it almost touching the SDG lockup beside it. */ .sdg-head{ align-items:start; column-gap:clamp(30px,6vw,110px); margin-bottom:var(--space-head); } /* the display face carries leading above its caps, so the headline is nudged up to sit optically level with the top of the SDG lockup beside it */ .sdg-head h2{font-size:clamp(2rem,5.2vw,4.5rem);margin-top:-.1em} @media (max-width:760px){ .sdg-head{row-gap:clamp(20px,5vw,34px)} } /* official UN lockup, sits above the section's description */ .sdg-logo{ width:100%;max-width:clamp(220px,26vw,360px);height:auto; margin-bottom:clamp(14px,1.7vw,24px); } .sdg{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(8px,1vw,14px);width:100%} .sdg-tile{ position:relative;aspect-ratio:1;border-radius:var(--radius-sm);overflow:hidden; color:var(--cream);padding:var(--card-pad);display:flex;flex-direction:column; justify-content:space-between;cursor:pointer; transition:transform .5s var(--ease),box-shadow .5s var(--ease); } .sdg-tile:hover,.sdg-tile:focus-visible{transform:translateY(-8px) rotate(-1deg);box-shadow:0 20px 40px rgba(0,0,0,.28);outline:none} .sdg-tile .n{font-family:var(--font-display);font-weight:900;font-size:clamp(2.2rem,5vw,3.6rem);line-height:.85;letter-spacing:-.05em} .sdg-tile .t{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:clamp(.78rem,1.3vw,1rem);line-height:1.15;letter-spacing:.01em} .sdg-tile .back{ position:absolute;inset:0;padding:inherit;background:inherit; display:flex;align-items:center;font-size:.72rem;line-height:1.4;font-weight:500; transform:translateY(100%);transition:transform .5s var(--ease); } .sdg-tile:hover .back,.sdg-tile:focus-visible .back,.sdg-tile.open .back{transform:none} .sdg-tile::after{ content:'';position:absolute;inset:0;background:rgba(0,0,0,.13);opacity:0; transition:opacity .4s;pointer-events:none; } /* official UN goal artwork sits as the tile face */ .sdg-tile.official{padding:0;background:none!important} .sdg-tile.official > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .sdg-tile.official .back{ padding:clamp(10px,1.2vw,16px);z-index:2; background:rgba(0,0,0,.92);color:var(--cream); } /* ---------- PRODUCT CARDS ---------- */ .prod{position:relative;overflow:hidden} .prod-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:center} .prod-media{position:relative;display:flex;align-items:center;justify-content:center;min-height:280px} /* top-align the shot with the product name beside it, rather than centring it */ .prod-top{align-items:start} .prod-top .prod-media{align-items:flex-start;min-height:0} .prod-media img{filter:drop-shadow(0 22px 30px rgba(0,0,0,.22));width:100%} .price-tag{ display:inline-flex;align-items:baseline;gap:.4em; background:var(--ink);color:var(--yellow); padding:.5em 1em;border-radius:100px;font-weight:900; } .price-tag small{font-size:.62em;opacity:.75;font-weight:700;letter-spacing:.06em} /* size / spec tables */ .spec{width:100%;border-collapse:collapse;margin-top:18px;font-size:.92rem} .spec th,.spec td{text-align:left;padding:.72em .6em;border-bottom:1px solid var(--line)} .spec th{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;opacity:.6;font-weight:800} .spec tr:last-child td{border-bottom:0} .spec td:last-child{text-align:right;font-weight:700} /* The sizes/grades tables lost their price column, so the remaining "Pack" column shouldn't inherit the right alignment that was meant for numbers. */ .spec-sizes th,.spec-sizes td,.spec-sizes td:last-child{text-align:left} .spec-sizes td{font-weight:500} /* Product facts: label column fixed, value column reads as a paragraph */ .spec-facts{margin-top:var(--space-stack);table-layout:fixed} .spec-facts td{vertical-align:top;text-align:left} .spec-facts td:first-child{ width:34%;font-family:var(--font-display);font-weight:800; font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;opacity:.62; padding-top:1em; } .spec-facts td:last-child{text-align:left;font-weight:500;line-height:1.5} @media (max-width:520px){ .spec-facts,.spec-facts tbody,.spec-facts tr,.spec-facts td{display:block;width:auto} .spec-facts td:first-child{padding-bottom:0;border-bottom:0} .spec-facts td:last-child{padding-top:.2em} } .bg-ink .spec th,.bg-ink .spec td{border-color:rgba(0,0,0,.18)} details.tds{border-top:2px solid var(--line);margin-top:22px} details.tds summary{ list-style:none;cursor:pointer;padding-block:16px;display:flex; align-items:center;justify-content:space-between;gap:12px; font-weight:800;text-transform:uppercase;letter-spacing:.1em;font-size:.78rem; } details.tds summary::-webkit-details-marker{display:none} details.tds summary::after{content:'+';font-size:1.4rem;line-height:1;font-weight:700} details.tds[open] summary::after{content:'–'} /* ---------- CHANNEL CARDS (purchase) ---------- */ .chan{ position:relative;border-radius:var(--radius);padding:var(--card-pad); min-height:clamp(132px,12vw,164px);display:flex;flex-direction:column;justify-content:space-between; color:var(--cream);overflow:hidden; transition:transform .5s var(--ease),box-shadow .5s var(--ease); } .chan:hover{transform:translateY(-10px);box-shadow:0 26px 50px rgba(0,0,0,.3)} .chan .big{font-family:var(--font-display);font-weight:900;font-size:clamp(1.6rem,3.4vw,2.6rem);line-height:.95;letter-spacing:-.03em;text-transform:uppercase} .chan .go{ display:inline-flex;align-items:center;gap:.5em;font-weight:800; text-transform:uppercase;letter-spacing:.1em;font-size:.78rem; } .chan .blob{ position:absolute;right:-30px;bottom:-40px;width:190px;height:190px;border-radius:50%; background:rgba(255,255,255,.14);transition:transform .6s var(--ease); } .chan:hover .blob{transform:scale(1.55)} .chan-shopee{background:#EE4D2D} .chan-tokped{background:#03AC0E} .chan-wa {background:#25D366} /* ---------- DISTRIBUTOR DIRECTORY ---------- */ .filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px} .chip{ font-family:var(--font-display); padding:.5em 1.1em;border-radius:100px;font-weight:800;font-size:.78rem; text-transform:uppercase;letter-spacing:.08em; box-shadow:inset 0 0 0 2px var(--line);transition:background .25s,color .25s,box-shadow .25s; } .chip[aria-pressed="true"]{background:var(--ink);color:var(--yellow);box-shadow:none} .dist{ border:2px solid var(--line);border-radius:var(--radius);padding:var(--card-pad); transition:border-color .3s,transform .4s var(--ease),background .3s; } .dist:hover{border-color:var(--ink);transform:translateY(-4px);background:var(--paper)} .dist h4{font-family:var(--font-display);font-weight:900;text-transform:uppercase;letter-spacing:-.01em;font-size:1.1rem} .dist .reg{font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;opacity:.55;margin-top:2px} .dist ul{margin-top:12px;font-size:.9rem;display:grid;gap:5px} /* ---------- DROPS ---------- */ .drop-card{ position:relative;border-radius:var(--radius);overflow:hidden;background:var(--paper); border:2px solid var(--line);transition:transform .5s var(--ease),box-shadow .5s var(--ease); } .drop-card:hover{transform:translateY(-8px);box-shadow:0 22px 44px rgba(0,0,0,.2)} .drop-card .thumb{aspect-ratio:1;position:relative;background:var(--yellow)} .drop-card .meta{padding:var(--card-pad)} .badge{font-family:var(--font-display); position:absolute;top:14px;left:14px;z-index:2; padding:.42em .9em;border-radius:100px;font-size:.66rem;font-weight:900; letter-spacing:.14em;text-transform:uppercase;background:var(--ink);color:var(--yellow); } .badge.sold{background:rgba(0,0,0,.55);color:var(--cream)} .badge.live{background:var(--red);color:var(--cream)} .sold-over{ position:absolute;inset:0;display:grid;place-items:center;z-index:1; background:rgba(0,0,0,.55);color:var(--cream);font-weight:900;letter-spacing:.2em; text-transform:uppercase;font-size:.9rem; } .count{display:flex;gap:10px;flex-wrap:wrap} .count div{ background:var(--ink);color:var(--yellow);border-radius:var(--radius-sm); padding:.75em 1em;min-width:76px;text-align:center; } .count b{font-family:var(--font-display);display:block;font-size:1.9rem;font-weight:900;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums} .count span{font-size:.6rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;opacity:.7} /* ---------- PAGE HEADER (inner pages) ---------- */ .phead{padding-top:calc(var(--nav-h) + var(--space-section));padding-bottom:var(--space-section)} /* Products has no page header, so the first product block clears the fixed nav itself */ .first-prod{padding-top:calc(var(--nav-h) + var(--space-section))} /* ---------- FOOTER ---------- */ /* Footer: blue block, black text, MADE Tommy Soft throughout. */ .foot{ background:var(--panel);color:var(--ink); font-family:var(--font-display); padding-block:var(--space-section) var(--card-pad); } .foot a:hover{opacity:.55} /* auto-width columns packed against the left edge instead of spread across the full width, which left a lot of dead space on the right */ .foot-grid{ display:grid;grid-auto-flow:column;grid-auto-columns:max-content; justify-content:start;align-items:start; column-gap:clamp(38px,7vw,120px);row-gap:34px; } .foot h5{font-size:.74rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;opacity:.6;margin-bottom:14px} .foot ul{display:grid;gap:9px;font-size:1rem;font-weight:500} .foot-bot{ margin-top:clamp(38px,6vw,64px);padding-top:22px;border-top:1px solid rgba(0,0,0,.18); display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap; font-size:.82rem;font-weight:500;opacity:.65; } .foot-lockups{ display:grid;grid-template-columns:repeat(3,1fr);align-items:center; gap:var(--gap);margin-top:var(--space-section); background:var(--cream);border-radius:var(--radius);padding:var(--card-pad); } /* The three lockups are different shapes, so matching their WIDTH made them look different sizes. Matching their HEIGHT is what makes them look equal. */ .foot-lockups img{ height:clamp(54px,6.4vw,92px);width:auto;max-width:100%; margin-inline:auto;object-fit:contain; transition:transform .45s var(--ease); } .foot-lockups img:hover{transform:translateY(-4px) scale(1.03)} @media (max-width:760px){ .foot-lockups{grid-template-columns:1fr;gap:22px} .foot-lockups img{height:64px} } /* floating whatsapp */ .wa-float{ position:fixed;right:18px;bottom:18px;z-index:90; width:56px;height:56px;border-radius:50%;background:#25D366;color:#fff; display:grid;place-items:center;box-shadow:0 10px 26px rgba(0,0,0,.3); transition:transform .4s var(--ease); } .wa-float:hover{transform:scale(1.1) rotate(6deg)} /* ---------- RESPONSIVE ---------- */ @media (max-width:980px){ .g4{grid-template-columns:repeat(2,1fr)} .foot-grid{grid-template-columns:1fr 1fr} .hero-grid{grid-template-columns:1fr;gap:0;padding-top:20px} .hero{min-height:auto;padding-bottom:40px} .hero-copy{max-width:none} .hero-img img{width:100%;margin-left:0} .scroll-cue{display:none} .prod-grid{grid-template-columns:1fr} .mv{grid-template-columns:1fr} .mv > div:first-child{border-right:0;border-bottom:2px solid currentColor} } @media (max-width:760px){ body{font-size:17px} .nav-links{display:none} .nav-right{margin-left:auto} .burger{display:block} .g3,.g2{grid-template-columns:1fr} .sdg{grid-template-columns:repeat(3,1fr)} .sdg-tile .back{font-size:.8rem} .foot-grid{grid-template-columns:1fr} .val-body-in{padding-left:0} } @media (max-width:420px){ .sdg{grid-template-columns:repeat(2,1fr)} } /* ---------- DISTRIBUTOR CARDS (photo + contact) ---------- */ .dist-group{ font-family:var(--font-display);font-weight:900;text-transform:uppercase; font-size:clamp(1.1rem,2vw,1.5rem);letter-spacing:.02em; padding-bottom:.5em;margin-bottom:var(--space-stack); border-bottom:2px solid var(--line); display:flex;align-items:center;gap:.55em; } .dist-group .flag{width:1.15em} .dist-group ~ .dist-group{margin-top:var(--space-section)} .dist-card{ border:2px solid var(--line);border-radius:var(--radius);overflow:hidden; background:var(--paper);display:flex;flex-direction:column; transition:border-color .3s,transform .45s var(--ease),box-shadow .45s var(--ease); } .dist-card:hover{border-color:var(--ink);transform:translateY(-5px);box-shadow:0 16px 34px rgba(0,0,0,.14)} .dist-photo{ width:100%;aspect-ratio:1/1;object-fit:cover;display:block; border-radius:0;outline-offset:-10px;margin:0; } .dist-body{padding:var(--card-pad)} .dist-body .reg{ font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase; opacity:.55;font-family:var(--font-display); display:flex;align-items:center;gap:.6em; } /* small country flag beside the region label */ .flag{ width:1.45em;height:auto;flex:none;border-radius:2px; box-shadow:0 0 0 1px rgba(0,0,0,.18); } .dist-body h4{ font-family:var(--font-display);font-weight:900;text-transform:uppercase; letter-spacing:-.01em;font-size:1.15rem;margin-top:.25em; } .dist-tel{ display:inline-block;margin-top:.6em;font-weight:700; border-bottom:2px solid var(--line);padding-bottom:2px; transition:border-color .25s; } .dist-tel:hover{border-color:var(--ink)} /* ========================================================================== SECRET DROPS — sticker wall JS owns .sticker transform (position, tilt, scale) so the throw physics stays smooth. CSS must not set transform on it, or the two fight. ========================================================================== */ /* Drops runs on one continuous cream surface. The header and the wall used to be two colours with a hard seam, which made the photos look boxed in. Killing the padding between them and letting the section overflow means a thrown polaroid reads as loose on the page. The JS still clamps it to the wall, so nothing can actually escape. */ .phead.bg-cream{padding-bottom:0} .wall-sec{background:var(--cream);padding-top:var(--space-stack); padding-bottom:var(--space-section);overflow:visible} .wall-top{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;margin-bottom:var(--space-stack)} .wall-hint{font-family:var(--font-display);font-weight:800;text-transform:uppercase;letter-spacing:.18em;font-size:.7rem;opacity:.5;margin:0} .shuffle{font-family:var(--font-display);font-weight:800;text-transform:uppercase;letter-spacing:.14em;font-size:.7rem; padding:.55em 1.2em;border-radius:100px;box-shadow:inset 0 0 0 2px var(--line); transition:background .2s,color .2s,box-shadow .2s,transform .25s var(--ease)} .shuffle:hover{background:var(--ink);color:var(--yellow);box-shadow:none;transform:translateY(-2px) rotate(-2deg)} .shuffle:active{transform:scale(.95)} .wall{position:relative;width:100%;max-width:var(--maxw);margin-inline:auto;height:calc(var(--rows,2) * clamp(310px,36vw,450px));touch-action:none} .sticker{position:absolute;left:0;top:0;width:clamp(150px,19vw,258px); transform-origin:50% 50%;will-change:transform; border:10px solid var(--paper);border-bottom-width:44px;border-radius:3px;background:var(--paper); box-shadow:0 10px 26px rgba(0,0,0,.20);cursor:grab;user-select:none;touch-action:none; transition:box-shadow .3s var(--ease)} .sticker:hover{box-shadow:0 20px 44px rgba(0,0,0,.30)} .sticker.grabbed{cursor:grabbing;box-shadow:0 30px 60px rgba(0,0,0,.36)} .sticker.flying{box-shadow:0 34px 66px rgba(0,0,0,.30)} .sticker img{width:100%;height:auto;display:block;pointer-events:none} .stamp{position:absolute;top:8%;left:50%;pointer-events:none; font-family:var(--font-display);font-weight:900;text-transform:uppercase; font-size:clamp(.9rem,1.5vw,1.25rem);letter-spacing:.06em; color:var(--red);border:4px solid var(--red);border-radius:6px;padding:.18em .55em;white-space:nowrap; transform:translate(-50%,-10px) rotate(-14deg) scale(2.4);opacity:0; transition:opacity .16s ease, transform .16s cubic-bezier(.2,1.6,.4,1)} .sticker:hover .stamp,.stamp.on{opacity:.92;transform:translate(-50%,-10px) rotate(-14deg) scale(1)} .dropbox{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:rgba(0,0,0,.82);padding:var(--pad)} .dropbox[hidden]{display:none} .dropbox-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,44px); align-items:center;width:min(1000px,100%);max-height:88vh;background:var(--cream); border-radius:var(--radius);padding:var(--card-pad);animation:popIn .3s cubic-bezier(.2,1.5,.4,1)} @keyframes popIn{from{opacity:0;transform:scale(.92) translateY(14px)}to{opacity:1;transform:none}} .dropbox-media{position:relative;border-radius:var(--radius-sm);overflow:hidden} .dropbox-media img{width:100%;height:auto;display:block} .dropbox-info h2{margin-block:.15em .35em} .dropbox-close{position:absolute;top:calc(var(--pad) / 2);right:calc(var(--pad) / 2);width:48px;height:48px; border-radius:50%;background:var(--cream);color:var(--ink);font-size:1.8rem;line-height:1;display:grid;place-items:center;z-index:2} .fit{display:inline-flex;border:2px solid var(--ink);border-radius:100px;overflow:hidden;margin-top:var(--space-stack)} .fit button{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:.76rem; letter-spacing:.1em;padding:.6em 1.3em;transition:background .2s,color .2s} .fit button[aria-pressed="true"]{background:var(--ink);color:var(--yellow)} @media (max-width:860px){ .dropbox-in{grid-template-columns:1fr;overflow:auto} .dropbox-media{max-height:46vh} .dropbox-media img{height:100%;object-fit:cover} } @media (max-width:700px){ .wall{height:auto;display:grid;grid-template-columns:repeat(2,1fr);gap:26px 14px;padding-inline:var(--pad)} .sticker{position:static;width:100%;transform:rotate(var(--r))!important} .shuffle{display:none} } @media (prefers-reduced-motion:reduce){ .sticker{transition:none} } /* ---------- the one tile that is NOT sold out ---------- */ .sticker.next{background:var(--yellow);border-color:var(--yellow)} .next-face{aspect-ratio:1100/1366;display:flex;flex-direction:column;align-items:center; justify-content:center;gap:.35em;text-align:center;padding:8%; background:repeating-linear-gradient(45deg,rgba(0,0,0,.05) 0 14px,transparent 14px 28px)} .next-kicker{font-family:var(--font-display);font-weight:900;text-transform:uppercase; font-size:clamp(.62rem,1vw,.78rem);letter-spacing:.2em} .next-q{font-family:var(--font-display);font-weight:900;font-size:clamp(3rem,6vw,5.4rem);line-height:.8} .next-when{font-family:var(--font-display);font-weight:800;text-transform:uppercase; font-size:clamp(.56rem,.9vw,.7rem);letter-spacing:.14em;opacity:.7} .sticker.next:hover{box-shadow:0 22px 48px rgba(0,0,0,.32)} /* ---------- monsters ---------- */ .monster{position:absolute;width:clamp(110px,15vw,210px);height:auto;pointer-events:none; z-index:1;transform-origin:50% 100%;will-change:transform} .monster.m1{left:-2%;bottom:0} .monster.m2{right:-2%;bottom:4%;left:auto} .monster.missing{width:clamp(96px,12vw,150px);aspect-ratio:3/4; background:repeating-linear-gradient(45deg,rgba(0,0,0,.05) 0 12px,transparent 12px 24px); outline:2px dashed rgba(0,0,0,.32);outline-offset:-6px;border-radius:var(--radius-sm)} @keyframes rage{0%,100%{transform:translateY(0) rotate(0)} 20%{transform:translateY(-10px) rotate(-7deg)}45%{transform:translateY(4px) rotate(6deg)} 70%{transform:translateY(-6px) rotate(-4deg)}} .monster.rage{animation:rage .55s var(--ease)} /* ---------- lightbox extras ---------- */ .soldin{font-size:.95rem;margin-bottom:.5em} .soldin b{font-weight:700} .art-missing{position:absolute;inset:0;margin:0;border-radius:0} .art-missing[hidden]{display:none} @media (max-width:700px){ .monster{display:none} } /* sound toggle in the nav */ .sfx-toggle{width:30px;height:30px;border-radius:50%;display:grid;place-items:center; font-size:.85rem;line-height:1;box-shadow:inset 0 0 0 2px currentColor; opacity:.75;transition:opacity .2s,background .2s,color .2s,transform .2s var(--ease)} .sfx-toggle:hover{opacity:1;transform:scale(1.08)} .sfx-toggle[aria-pressed="false"]{opacity:.4} /* ---------- sharpie caption on the polaroid lip ---------- */ .scrawl{position:absolute;left:0;right:0;bottom:-36px;height:36px; display:flex;align-items:center;justify-content:center; font-family:'Permanent Marker',var(--font-display),cursive; font-size:clamp(.82rem,1.35vw,1.12rem);line-height:1;letter-spacing:.01em; color:#1a1a1a;text-align:center;padding-inline:8px; transform:rotate(-1.2deg);pointer-events:none; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sticker:nth-child(2n) .scrawl{transform:rotate(1deg)} .sticker:nth-child(3n) .scrawl{transform:rotate(-2deg)} /* the lightbox title has to fit the panel, so it is a step down from d2 */ #dropboxName{font-size:clamp(1.9rem,3.4vw,3rem);line-height:.98; overflow-wrap:break-word;hyphens:none;margin-block:.1em .35em} @media (max-width:700px){ .scrawl{bottom:-32px;height:32px;font-size:.9rem} } /* ---------- COMING SOON tiles ---------- Same polaroid, but the artwork sits behind a blur until someone hovers. Touch screens have no hover, so the label says tap and the lightbox does the reveal instead. */ .sticker.soon img{filter:blur(16px) saturate(.55) brightness(.82);transform:scale(1.06); transition:filter .45s var(--ease), transform .45s var(--ease)} .sticker.soon .peek{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); font-family:var(--font-display);font-weight:900;text-transform:uppercase; font-size:clamp(.6rem,.95vw,.74rem);letter-spacing:.18em;text-align:center; color:var(--paper);background:rgba(0,0,0,.55);backdrop-filter:blur(2px); padding:.6em 1em;border-radius:999px;white-space:nowrap;pointer-events:none; transition:opacity .3s var(--ease)} .sticker.soon .tape{position:absolute;top:12px;left:-14px; font-family:var(--font-display);font-weight:900;text-transform:uppercase; font-size:clamp(.56rem,.85vw,.68rem);letter-spacing:.16em; background:var(--yellow);color:var(--ink);padding:.45em 1.1em; transform:rotate(-6deg);box-shadow:0 4px 12px rgba(0,0,0,.22);pointer-events:none;z-index:2} @media (hover:hover){ .sticker.soon:hover img{filter:blur(0) saturate(1) brightness(1);transform:scale(1)} .sticker.soon:hover .peek{opacity:0} } .stamp.soon{color:var(--ink);border-color:var(--ink);background:var(--yellow)} /* ---------- Vanilla Slurry: photo blend, no cut-out ---------- Keying this product out kept leaving ragged edges, because the backdrop and the dark bottles share tones. So nothing is cut. The section instead takes the photograph's own wall colour (#80CED7, sampled from the file) and the shot's four edges are feathered away, which makes the photo backdrop and the page backdrop read as one surface. The darker band under the bottles is the table from the shot and is left alone, so they look like they are standing on something. */ #vanilla-slurry{background:#80CED7} #vanilla-slurry .prod-media img{ filter:none;border-radius:0;width:100%;height:auto; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 15%, #000 85%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 13%, #000 82%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 15%, #000 85%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 13%, #000 82%, transparent 100%); -webkit-mask-composite:source-in; mask-composite:intersect; } /* ---------- Vanilla Dew: same photo blend as Slurry ---------- Difference from Slurry: the backdrop here is a duller yellow than the brand #FEC152, and the sticky nav turns brand yellow over this section, so tinting the section to match the photo would have shown a seam under the header. The correction is baked into dew-shot.jpg instead, which leaves the section on brand yellow. The shot was also lit brighter on the left, so each column is normalised to brand yellow using the clean strip above the products. With the backdrop flat, the edges only need a 3-4% feather instead of the heavy one that was swallowing the bottles. */ #vanilla-dew .prod-media img{ filter:none;border-radius:0;width:100%;height:auto; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 3%, #000 97%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 3%, #000 97%, transparent 100%); -webkit-mask-composite:source-in; mask-composite:intersect; } /* ---------- distributors: countries side by side ---------- Each region used to be a full-width band stacked on the last, which ran the section to ~2400px. The regions are now columns, and the cards inside each column are trimmed down: a 4:3 photo instead of a square, tighter padding and smaller type. */ .dist-countries{ display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:clamp(18px,2.2vw,34px);align-items:start;margin-top:var(--space-stack); } .dist-countries .dist-group{ margin-top:0;margin-bottom:.75em;padding-bottom:.5em; font-size:clamp(.85rem,1.25vw,1rem); } .dist-countries .grid.g3{grid-template-columns:1fr;gap:16px} .dist-countries .dist-photo{aspect-ratio:4/3} .dist-countries .dist-body{padding:clamp(11px,1.1vw,16px)} .dist-countries .dist-body h4{font-size:clamp(.92rem,1.15vw,1.02rem);margin-top:.2em} .dist-countries .dist-body .reg{font-size:.6rem;letter-spacing:.12em} .dist-countries .dist-tel{margin-top:.45em;font-size:.9rem} @media (max-width:640px){ .dist-countries{grid-template-columns:1fr} } /* ---------- distributors: centred intro, four across ---------- The intro was a two-column split with the heading left and the blurb right; it now stacks centred with the line running full width. The countries grid is a fixed four columns and each region spans as many columns as it has distributors, so the two US ones sit side by side rather than stacked and all four photos read as a single row. */ .dist-head{display:block;text-align:center;max-width:none} .dist-head h2{margin-inline:auto;white-space:nowrap} @media (max-width:760px){ .dist-head h2{white-space:normal} } .dist-head .lead{max-width:none;margin:.5em auto 0} .dist-countries{grid-template-columns:repeat(4,minmax(0,1fr))} .dist-country{grid-column:span var(--n,1);min-width:0} .dist-countries .dist-country .grid.g3{ grid-template-columns:repeat(var(--n,1),minmax(0,1fr));gap:clamp(12px,1.3vw,20px); } .dist-countries .dist-body h4{font-size:clamp(.86rem,1.05vw,.96rem)} .dist-countries .dist-tel{font-size:.85rem} @media (max-width:1040px){ .dist-countries{grid-template-columns:repeat(2,minmax(0,1fr))} .dist-country{grid-column:span 1} .dist-countries .dist-country .grid.g3{grid-template-columns:1fr} .dist-head .lead{max-width:60ch} } @media (max-width:600px){ .dist-countries{grid-template-columns:1fr} } /* the closing invitation under the distributor row */ .dist-cta{ text-align:center;margin:calc(var(--space-head) + 6px) auto 0;max-width:60ch; font-size:clamp(1.02rem,1.35vw,1.22rem);line-height:1.55; } .dist-cta a{text-decoration:underline;text-underline-offset:3px;font-weight:700} .dist-cta a:hover{opacity:.7} /* chan-rectangle */ /* Shopee / Tokopedia / WhatsApp were 410x270 squares, three big blocks before any real content. Shorter box, tighter padding, smaller wordmark, so they read as buttons. Placed after the original .chan rules so it wins on order. */ .chan{padding:clamp(15px,1.5vw,22px)} .chan .big{font-size:clamp(1.4rem,2.1vw,1.8rem);margin-top:.15em} .chan .small{margin-bottom:8px;font-size:.84rem} .chan .eyebrow{font-size:.6rem;letter-spacing:.14em} .chan .blob{transform:scale(.68)} /* tds-open */ /* The beans spec sheet is no longer an accordion, so it needs the padding and heading that
/ used to provide. */ .tds-open{display:block} .tds-open .tds-title{ font-family:var(--font-display);font-weight:900;text-transform:uppercase; letter-spacing:.02em;font-size:clamp(.82rem,1.1vw,.95rem); margin:var(--space-head) 0 .6em; } /* === mobile pass === */ /* Everything below is phone-only and additive: desktop is untouched. Fixes found by measuring the live pages at 390px. */ /* 1. Drops wall overflowed the screen by 46px. The SOLD OUT stamp is drawn at scale(2.4) and revealed by hover; with no hover it stayed huge and invisible, pushing the page sideways. On touch it should simply be visible at full size. */ @media (hover:none), (max-width:700px){ .sticker .stamp{opacity:.92;transform:translate(-50%,-10px) rotate(-14deg) scale(1)} } @media (max-width:820px){ /* 2. Tap targets. Apple and Android both ask for ~44px; these were 20-33px. */ .lang button{min-height:40px;padding-inline:14px} .sfx-toggle{width:40px;height:40px} .burger{width:44px;height:44px} .foot ul a,.lk-foot a{display:inline-block;padding-block:8px} .dist-tel{display:inline-block;padding-block:6px} .go{display:inline-block;padding-block:6px} /* 3. Text that was 9-12px on a phone. Labels can stay small, but body-ish text and table data need to be readable at arm's length. */ .spec td,.spec th{font-size:.9rem;line-height:1.45} .foot h5{font-size:.8rem} .eyebrow{font-size:.74rem} .badge{font-size:.72rem} .wall-hint,.shuffle{font-size:.78rem} .sticker .tape{font-size:.68rem} .sticker .peek{font-size:.7rem;padding:.55em 1em} } /* 4. On a phone the hero copy sits on top of the product photo and the two fight each other. A scrim behind the text restores contrast without changing the desktop composition. */ @media (max-width:760px){ .hero{position:relative} .hero::after{ content:"";position:absolute;inset:0;pointer-events:none;z-index:0; background:linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.38) 46%, rgba(0,0,0,.12) 72%, transparent 100%); } .hero .wrap{position:relative;z-index:1} .hero-copy{text-shadow:0 2px 18px rgba(0,0,0,.45)} .hero-sub{text-shadow:0 1px 12px rgba(0,0,0,.5)} } /* === mobile pass 2 === */ /* Round two. The first pass missed these because existing rules were more specific than mine, so they silently won. Matching their specificity here. These are all uppercase micro-labels rather than prose, so they only need to come up to ~12.8px; anything you actually read is already 14px+. */ @media (max-width:820px){ .sticker.soon .tape{font-size:.7rem} .sticker.soon .peek{font-size:.74rem;padding:.55em 1em} .spec-facts td:first-child{font-size:.8rem} .lang button{font-size:.8rem} .fit button{font-size:.78rem} .badge{font-size:.76rem} .chan .eyebrow,.dist-body .reg{font-size:.7rem} } /* === mobile pass 3 === */ @media (max-width:760px){ /* 2. On a phone the hero photo and the headline were stacked on top of each other and both lost. Give the photo the top half and put the copy in a solid block underneath, so the product is seen and the words are read. */ .hero{min-height:0;display:block;padding-top:0;overflow:visible} .hero::before{content:"";display:block;height:min(54svh,430px)} .hero::after{display:none} .hero .wrap{ position:relative;z-index:1;background:var(--ink);color:var(--cream); padding-block:clamp(24px,6vw,36px); } .hero-copy,.hero-sub{text-shadow:none} .hero .scroll-cue{display:none} /* 3. The footer logo had a fixed height plus max-width:100%, so a narrow column squashed it out of proportion. Let the width lead instead. */ .foot .logo.logo-lg img{height:auto;width:min(210px,56vw);max-width:none} /* 4. The three product lockups are different shapes. Stacked on a phone, matching their height made their widths differ; match width instead. */ .foot-lockups{grid-template-columns:1fr;gap:18px} .foot-lockups img{height:auto;width:100%;max-width:250px;margin-inline:auto;object-fit:contain} } /* === mobile pass 4 : hero photo crop === */ @media (max-width:760px){ .hero{background-image:none;background-color:var(--ink)} .hero::before{background:url("img/hero-shot.jpg") 78% 50%/cover no-repeat} } /* === mobile pass 5 : drawer polish === */ @media (max-width:820px){ .drawer{ display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start; padding:clamp(86px,20vw,112px) 24px 40px;gap:0;overflow-y:auto; } .drawer a{ display:block;width:100%;padding:.62em 0;color:var(--ink); border-bottom:2px solid rgba(0,0,0,.14);text-decoration:none; } .drawer a:last-of-type{border-bottom:0} .burger{position:relative} .burger.open::after{ content:"CLOSE";position:absolute;left:50%;top:calc(100% - 2px); transform:translateX(-50%);color:var(--ink); font-size:.56rem;font-weight:800;letter-spacing:.1em;line-height:1; } } /* slurry-feather-match : same visible width as Dew */ #vanilla-slurry .prod-media img{ -webkit-mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 3%, #000 97%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 3%, #000 97%, transparent 100%); -webkit-mask-composite:source-in; mask-composite:intersect; } /* drawer-current-visible */ @media (max-width:820px){ .drawer a[aria-current="page"]{display:block!important;opacity:.45} } /* svh-fallback : older iOS Safari ignores svh, keep a real height */ @media (max-width:760px){ .hero::before{height:64vw;height:min(54svh,430px)} } /* rv-failsafe : never leave the page blank if the reveal script fails */ @keyframes rv-failsafe{to{opacity:1;transform:none}} .rv{animation:rv-failsafe .3s ease 2.5s forwards} .rv.in{animation:none} @media (prefers-reduced-motion:reduce){ .rv{opacity:1;transform:none;animation:none} } /* === mobile pass 6 === */ /* no music button anywhere */ .sfx-toggle{display:none!important} /* drawer: no Home entry, and the other three never disappear */ @media (max-width:820px){ .drawer a[aria-current="page"]{display:block!important;opacity:1} .drawer a[href$="index.html"]{display:none!important} } /* hero: copy sits on the photo behind a soft gradient, no black slab */ @media (max-width:760px){ .hero{ display:flex;align-items:flex-end; min-height:86vh;min-height:min(88svh,720px); background-image:url("img/hero-shot.jpg"); background-size:cover;background-position:72% 26%; background-color:var(--ink); padding-top:0;overflow:hidden; } .hero::before{display:none} .hero .wrap{ position:relative;z-index:1;width:100%; color:var(--cream); background:linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.80) 40%, rgba(0,0,0,.45) 70%, rgba(0,0,0,0) 100%); padding-block:clamp(72px,17vw,120px) clamp(26px,7vw,40px); } } /* footer stacks so nothing pushes the page sideways */ html{overflow-x:clip} @media (max-width:820px){ .foot-grid{grid-auto-flow:row!important;grid-auto-columns:auto!important;grid-template-columns:1fr 1fr!important;justify-content:stretch;column-gap:clamp(18px,6vw,34px);row-gap:26px} .foot-grid>*:first-child{grid-column:1/-1} } /* === mobile pass 7 : hero on cream, photo above === */ @media (max-width:760px){ .hero{ display:block;min-height:0;padding-top:0;overflow:hidden; background-image:none;background-color:var(--cream); } .hero::before{ content:"";display:block; height:66vw;height:min(52svh,430px); background:url("img/hero-shot.jpg") 78% 50%/cover no-repeat; } .hero .wrap{ position:relative;z-index:1; background:var(--cream);color:var(--ink); padding-block:clamp(26px,7vw,38px) clamp(32px,9vw,48px); } .hero .hero-copy,.hero .hero-sub{color:var(--ink);text-shadow:none} .hero .btn-outline{border-color:var(--ink);color:var(--ink);background:transparent} } /* === mobile pass 8 : photo above the heading === */ @media (max-width:760px){ .intro-split>.intro-copy{order:2} .intro-split>.intro-photo{order:1;margin-bottom:clamp(18px,5vw,28px)} } /* lk-page-chrome : the links page has no menu and no language toggle */ .lk-page .lang{display:none!important} .lk-page .lk-foot{display:none!important}