/* ========================================================================== 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:100; 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. */ .intro-split{ display:grid;grid-template-columns:2fr 1fr;align-items:stretch; background:var(--yellow); } .intro-copy{ display:flex;flex-direction:column;justify-content:center; padding-block:var(--space-section); 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;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:270px;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)} }