/* ============================================================ SMOALD — shared stylesheet One source of truth for every page (home, AI, Learn, Store, portfolio). Light theme · white background · red + gold brand palette. Colour is themed per page via . ============================================================ */ :root{ /* surfaces (names kept from the old dark theme so rules don't churn) */ --ink:#FFFFFF; /* page background */ --ink-2:#FBF6EC; /* warm cream band */ --panel:#FFFFFF; /* cards */ --panel-2:#FCF7EF; /* card hover */ --line:rgba(26,18,11,.10); --line-strong:rgba(26,18,11,.18); --text:#1A120B; /* warm near-black */ --muted:#6B6256; --muted-2:#9C9286; --shadow:0 1px 2px rgba(26,18,11,.05), 0 10px 28px rgba(26,18,11,.06); --shadow-lg:0 2px 6px rgba(26,18,11,.06), 0 18px 44px rgba(26,18,11,.10); /* brand palette — red + gold (with amber as the in-between tone) */ --red:#E20613; --red-soft:rgba(226,6,19,.09); --red-line:rgba(226,6,19,.38); --gold:#ECA200; --gold-soft:rgba(236,162,0,.13); --gold-line:rgba(236,162,0,.45); /* "amber" kept as an alias of red so the brand stays strictly red + gold */ --amber:var(--red); --amber-soft:var(--red-soft); --amber-line:var(--red-line); /* two-tone hub aliases used by the homepage doors + ecosystem */ --build:var(--red); --build-soft:var(--red-soft); --learn:var(--gold); --learn-soft:var(--gold-soft); --shop:var(--red); --shop-soft:var(--red-soft); --life:var(--gold); --life-soft:var(--gold-soft); /* per-page accent — defaults to brand red; overridden by [data-hub] below */ --accent:var(--red); --accent-2:var(--gold); --accent-soft:var(--red-soft); --accent-shadow:rgba(226,6,19,.30); --on-accent:#FFFFFF; /* text colour that sits on the accent fill */ --maxw:1120px; --display:"Bricolage Grotesque",system-ui,sans-serif; --body:"Hanken Grotesk",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,monospace; } /* ---- per-hub theming: set and the page recolours ---- Every hub is red-primary + gold-secondary on white, so the whole site stays consistently red + gold (the deep gold reads as orange when used as a big fill, so it's kept for highlights/gradients, not button/badge fills). */ body[data-hub="learn"], body[data-hub="shop"], body[data-hub="life"]{ --accent:var(--red); --accent-2:var(--gold); --accent-soft:var(--red-soft); --accent-shadow:rgba(226,6,19,.30); --on-accent:#FFFFFF; } /* Learn + Lifestyle keep a bright, shiny-gold heading accent so the pages clearly read as red + gold (never orange) — red fills, gold highlight. */ body[data-hub="learn"] .hero h1 .accent, body[data-hub="life"] h1 .accent{ background:linear-gradient(180deg,#FFDA5B 0%,#FFC107 55%,#F0A500 100%); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent} /* ---- base ---- */ *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{background:var(--ink);color:var(--text);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden} a{color:inherit;text-decoration:none} img{max-width:100%} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px} .eyebrow{font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);display:inline-block;margin-bottom:18px} /* ---- NAV ---- */ .nav{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .3s,border-color .3s,backdrop-filter .3s,box-shadow .3s;border-bottom:1px solid transparent} .nav.scrolled{background:rgba(255,255,255,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);box-shadow:0 6px 20px rgba(26,18,11,.05)} .nav-inner{display:flex;align-items:center;justify-content:space-between;height:72px} .brand{font-family:var(--display);font-weight:800;font-size:1.18rem;letter-spacing:-.01em;display:flex;align-items:center;gap:10px;color:var(--text)} .brand .dot{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 14px var(--accent-shadow)} .brand .bolt{height:30px;width:auto;display:block} .brand .sub{font-family:var(--mono);font-weight:400;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)} .brand-logo{height:30px;width:auto;display:block} .nav-links{display:flex;align-items:center;gap:30px} .nav-links a{font-size:.95rem;color:var(--muted);transition:color .2s} .nav-links a:hover{color:var(--text)} .nav-cta{font-family:var(--body);font-weight:600;font-size:.9rem;background:var(--accent);color:var(--on-accent);padding:10px 18px;border-radius:999px;transition:transform .15s,box-shadow .2s} .nav-cta:hover{transform:translateY(-1px);box-shadow:0 8px 24px var(--accent-shadow)} .menu-btn{display:none;background:none;border:1px solid var(--line-strong);color:var(--text);width:42px;height:42px;border-radius:10px;cursor:pointer;font-size:1.1rem} /* ---- breadcrumb (sub-pages) ---- */ .crumb{font-family:var(--mono);font-size:.8rem;color:var(--muted-2);margin-bottom:22px;letter-spacing:.03em} .crumb a{color:var(--accent)} .crumb a:hover{opacity:.7} /* ---- HERO (sub-page default: left-aligned, glow top-right) ---- */ .hero{position:relative;padding:150px 0 60px;overflow:hidden} .hero-glow{position:absolute;top:-160px;right:-100px;width:620px;height:620px;background:radial-gradient(circle at center,rgba(226,6,19,.10),rgba(236,162,0,.06) 42%,transparent 70%);filter:blur(10px);pointer-events:none;z-index:0} .hero .wrap{position:relative;z-index:1} .hero h1{font-family:var(--display);font-weight:800;font-size:clamp(2.4rem,6vw,4.6rem);line-height:1.02;letter-spacing:-.025em;max-width:18ch;margin-bottom:22px} .hero h1 .accent{color:var(--accent)} .hero-sub{font-size:1.15rem;color:var(--muted);max-width:54ch;margin-bottom:32px;line-height:1.65} .hero-sub strong{color:var(--text);font-weight:600} .cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center} .avail{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:.8rem;color:var(--muted);letter-spacing:.04em;margin-top:26px} .avail .pulse{width:9px;height:9px;border-radius:50%;background:#2FB463;box-shadow:0 0 0 0 rgba(47,180,99,.5);animation:pulse 2.4s infinite} @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(47,180,99,.45)}70%{box-shadow:0 0 0 9px rgba(47,180,99,0)}100%{box-shadow:0 0 0 0 rgba(47,180,99,0)}} /* ---- HERO (homepage: centred, grid backdrop, logo image) ---- */ .hero.home{padding:188px 0 74px;text-align:center} .hero.home::before{content:"";position:absolute;inset:0;z-index:0; background-image:linear-gradient(rgba(26,18,11,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(26,18,11,.045) 1px,transparent 1px); background-size:64px 64px; -webkit-mask:radial-gradient(circle at 50% 36%,#000 0%,transparent 70%); mask:radial-gradient(circle at 50% 36%,#000 0%,transparent 70%)} .hero.home .hero-glow{top:-180px;left:50%;right:auto;transform:translateX(-50%);width:840px;height:680px;background:radial-gradient(circle at center,rgba(226,6,19,.12),rgba(236,162,0,.07) 40%,transparent 68%)} .hero-tag{font-family:var(--mono);font-size:.92rem;letter-spacing:.34em;text-transform:uppercase;color:var(--red);margin-bottom:26px} .hero.home h1{max-width:none;margin-left:auto;margin-right:auto} .hero h1.hero-logo{display:block;margin:0 auto 22px} .hero h1.hero-logo img{width:min(560px,84vw);height:auto;display:block;margin:0 auto;filter:drop-shadow(0 10px 30px rgba(226,6,19,.14))} /* crisp text wordmark — SMO in red, ALD in a gold gradient (scales sharp at any size) */ .hero-wordmark{font-family:var(--display);font-weight:800;font-size:clamp(3.6rem,12.5vw,8.2rem);line-height:.9;letter-spacing:-.02em;display:block;margin:0 auto 20px} .hero-wordmark .r{color:var(--red)} .hero-wordmark .g{background:linear-gradient(180deg,#FFF3B0 0%,#FFDA5B 28%,#FFC107 50%,#FFD75E 68%,#F0A500 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent} .hero.home .hero-sub{max-width:48ch;margin:0 auto 14px} .hero-sub .b{color:var(--red)} .hero-sub .l{color:var(--gold)} .hero-sub .s{color:var(--amber)} .hero-founder{font-family:var(--mono);font-size:.82rem;letter-spacing:.06em;color:var(--muted-2);margin-bottom:34px} .hero-btns{display:flex;flex-wrap:wrap;gap:14px;justify-content:center} .hero-btn{font-family:var(--body);font-weight:600;font-size:1rem;padding:13px 26px;border-radius:14px;border:1px solid;display:inline-flex;align-items:center;gap:9px;transition:transform .15s,box-shadow .2s,background .2s} .hero-btn.build{color:var(--red);border-color:var(--red-line);background:var(--red-soft)} .hero-btn.build:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(226,6,19,.22)} .hero-btn.learn{color:#9A6B00;border-color:var(--gold-line);background:var(--gold-soft)} .hero-btn.learn:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(236,162,0,.24)} .hero-btn.shop{color:var(--red);border-color:var(--red-line);background:var(--red-soft)} .hero-btn.shop:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(226,6,19,.22)} .hero-btn.life{color:#9A6B00;border-color:var(--gold-line);background:var(--gold-soft)} .hero-btn.life:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(236,162,0,.24)} /* ---- buttons ---- */ .btn{font-family:var(--body);font-weight:600;font-size:.98rem;padding:14px 26px;border-radius:999px;cursor:pointer;transition:transform .15s,box-shadow .2s,background .2s,border-color .2s;display:inline-flex;align-items:center;gap:9px;border:1px solid transparent} .btn-primary{background:var(--accent);color:var(--on-accent)} .btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 30px var(--accent-shadow)} .btn-ghost{background:#fff;border:1px solid var(--line-strong);color:var(--text)} .btn-ghost:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)} /* ---- generic section heading ---- */ .section{padding:80px 0} .section-head{margin-bottom:44px;max-width:60ch} .section-head h2{font-family:var(--display);font-weight:700;font-size:clamp(1.8rem,3.6vw,2.7rem);letter-spacing:-.02em;line-height:1.1} .section-head p{color:var(--muted);margin-top:14px;font-size:1.05rem;max-width:54ch} /* ---- DOORS / CARDS (homepage) ---- */ .doors{padding:54px 0 96px} .doors-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:20px} .door{position:relative;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:30px 30px 28px;min-height:308px;box-shadow:var(--shadow);transition:transform .22s,border-color .22s,box-shadow .22s;overflow:hidden} .door::after{content:"";position:absolute;inset:0;opacity:0;transition:opacity .28s;pointer-events:none} .door.build::after{background:radial-gradient(circle at 18% -10%,var(--build-soft),transparent 58%)} .door.learn::after{background:radial-gradient(circle at 18% -10%,var(--learn-soft),transparent 58%)} .door.shop::after{background:radial-gradient(circle at 18% -10%,var(--shop-soft),transparent 58%)} .door.life::after{background:radial-gradient(circle at 18% -10%,var(--life-soft),transparent 58%)} .door:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)} .door:hover::after{opacity:1} .door.build:hover{border-color:var(--red-line)} .door.learn:hover{border-color:var(--gold-line)} .door.shop:hover{border-color:var(--red-line)} .door.life:hover{border-color:var(--gold-line)} .door-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px;position:relative;z-index:1} .door-ico{width:52px;height:52px;border-radius:13px;display:grid;place-items:center} .door.build .door-ico{background:var(--build-soft);color:var(--red);border:1px solid var(--red-line)} .door.learn .door-ico{background:var(--learn-soft);color:var(--gold);border:1px solid var(--gold-line)} .door.shop .door-ico{background:var(--shop-soft);color:var(--red);border:1px solid var(--red-line)} .door.life .door-ico{background:var(--life-soft);color:var(--gold);border:1px solid var(--gold-line)} .door-ico svg{width:24px;height:24px} .door-arrow{color:var(--muted-2);transition:transform .2s,color .2s} .door:hover .door-arrow{transform:translate(4px,-4px);color:var(--text)} .door .verb{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px;position:relative;z-index:1} .door.build .verb{color:var(--red)} .door.learn .verb{color:#9A6B00} .door.shop .verb{color:var(--red)} .door.life .verb{color:#9A6B00} .door h2{font-family:var(--display);font-weight:700;font-size:1.55rem;letter-spacing:-.015em;margin-bottom:10px;position:relative;z-index:1} .door p{color:var(--muted);font-size:.98rem;line-height:1.6;flex:1;position:relative;z-index:1} .door .stat{display:flex;flex-wrap:wrap;gap:16px;margin-top:22px;position:relative;z-index:1} .door .stat span{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.76rem;color:var(--muted)} .door .stat i{width:8px;height:8px;border-radius:50%;flex:none} .door .stat .live i{box-shadow:0 0 8px currentColor} .door.build .stat .live i{background:var(--red);color:var(--red)} .door.learn .stat .live i{background:var(--gold);color:var(--gold)} .door.shop .stat .live i{background:var(--red);color:var(--red)} .door.life .stat .live i{background:var(--gold);color:var(--gold)} .door .stat .soon i{background:transparent;border:1.5px solid var(--muted-2)} /* ---- ECOSYSTEM (homepage interactive hub-and-spokes) ---- */ .eco{padding:48px 0 104px} .eco-head{text-align:center;max-width:60ch;margin:0 auto 10px} .eco-head h2{font-family:var(--display);font-weight:800;font-size:clamp(2rem,5vw,3.2rem);letter-spacing:-.02em;line-height:1.02;text-transform:uppercase} .eco-head p{color:var(--muted);margin-top:14px;font-size:1.05rem} .eco-stage{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;margin-top:42px} .eco-viz{position:relative;width:100%;max-width:520px;aspect-ratio:1;margin:0 auto} .eco-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible} .eco-line{stroke:rgba(26,18,11,.14);stroke-width:.5;stroke-dasharray:2 2;transition:stroke .25s,stroke-width .25s} .eco-line.on{stroke-width:.9;stroke-dasharray:none} .eco-line[data-line="build"].on{stroke:var(--red);filter:drop-shadow(0 0 3px rgba(226,6,19,.5))} .eco-line[data-line="shop"].on{stroke:var(--red);filter:drop-shadow(0 0 3px rgba(226,6,19,.5))} .eco-line[data-line="learn"].on{stroke:var(--gold);filter:drop-shadow(0 0 3px rgba(236,162,0,.5))} .eco-line[data-line="life"].on{stroke:var(--gold);filter:drop-shadow(0 0 3px rgba(236,162,0,.5))} .eco-node{position:absolute;transform:translate(-50%,-50%);background:#fff;border:1.5px solid var(--line-strong);border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--muted);box-shadow:var(--shadow);transition:border-color .25s,box-shadow .25s,color .25s,background .25s;padding:0} .eco-node .ico{display:grid;place-items:center;gap:5px;text-align:center} .eco-node .ico svg{width:26px;height:26px} .eco-node .ico b{font-family:var(--mono);font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;font-weight:500} .eco-node.hub{width:21%;height:21%;z-index:3} .eco-node.hub .ico svg{width:30px;height:30px} .eco-node.build,.eco-node.shop,.eco-node.learn,.eco-node.life{width:30%;height:30%;z-index:2} .eco-node.build.active{border-color:var(--red);color:var(--red);box-shadow:0 0 0 1px var(--red),0 14px 30px rgba(226,6,19,.22)} .eco-node.shop.active{border-color:var(--red);color:var(--red);box-shadow:0 0 0 1px var(--red),0 14px 30px rgba(226,6,19,.22)} .eco-node.learn.active{border-color:var(--gold);color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 14px 30px rgba(236,162,0,.24)} .eco-node.life.active{border-color:var(--gold);color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 14px 30px rgba(236,162,0,.24)} .eco-node.hub.active{border-color:var(--red);color:var(--red);box-shadow:0 0 0 1px var(--red),0 14px 28px rgba(226,6,19,.22)} .orbit{position:absolute;inset:-13%;border-radius:50%;opacity:0;transition:opacity .3s;color:inherit;pointer-events:none} .eco-node.active .orbit{opacity:1;animation:spin 9s linear infinite} .orbit i{position:absolute;border-radius:50%;background:currentColor} .orbit i:nth-child(1){width:7px;height:7px;top:-3px;left:46%} .orbit i:nth-child(2){width:5px;height:5px;top:30%;right:-2px} .orbit i:nth-child(3){width:6px;height:6px;bottom:4%;left:14%} .orbit i:nth-child(4){width:4px;height:4px;top:8%;left:6%;opacity:.7} @keyframes spin{to{transform:rotate(360deg)}} .eco-detail{position:relative;min-height:236px;background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:30px 30px;display:flex;align-items:center;box-shadow:var(--shadow)} .eco-empty{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%;color:var(--muted-2);text-align:center} .eco-empty svg{width:42px;height:42px;opacity:.5} .eco-detail.has .eco-empty{display:none} .eco-panel{display:none;width:100%} .eco-panel.show{display:block;animation:fade .3s ease} @keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .eco-panel .pk{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px} .eco-panel.build .pk{color:var(--red)} .eco-panel.shop .pk{color:var(--red)} .eco-panel.learn .pk{color:#9A6B00} .eco-panel.life .pk{color:#9A6B00} .eco-panel.hub .pk{color:var(--red)} .eco-panel h3{font-family:var(--display);font-weight:700;font-size:1.5rem;letter-spacing:-.015em;margin-bottom:14px} .eco-panel ul{list-style:none;display:flex;flex-direction:column;gap:9px;margin-bottom:18px} .eco-panel li{display:flex;align-items:center;gap:10px;font-size:.95rem;color:var(--text)} .eco-panel li .d{width:7px;height:7px;border-radius:50%;flex:none;background:var(--muted-2)} .eco-panel li.on .d{box-shadow:0 0 8px currentColor} .eco-panel.build li.on .d{background:var(--red);color:var(--red)} .eco-panel.shop li.on .d{background:var(--amber);color:var(--amber)} .eco-panel.learn li.on .d{background:var(--gold);color:var(--gold)} .eco-panel.life li.on .d{background:var(--gold);color:var(--gold)} .eco-panel li.off{color:var(--muted)} .eco-panel li .soon{font-family:var(--mono);font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2);margin-left:auto} .eco-panel li a{color:inherit;border-bottom:1px solid transparent;transition:color .2s,border-color .2s} .eco-panel.shop li a:hover{color:var(--amber);border-color:var(--amber)} .eco-panel li .live{font-family:var(--mono);font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;margin-left:auto} .eco-panel.shop li .live{color:var(--amber)} .eco-panel p{color:var(--muted);font-size:1rem;line-height:1.65;margin-bottom:18px} .eco-panel .enter{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:.84rem;transition:gap .2s} .eco-panel.build .enter{color:var(--red)} .eco-panel.shop .enter{color:var(--red)} .eco-panel.learn .enter{color:#9A6B00} .eco-panel.life .enter{color:#9A6B00} .eco-panel .enter:hover{gap:14px} /* ---- FOUNDER (homepage) ---- */ .founder{background:var(--ink-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .founder .wrap{padding:80px 28px} .founder-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center} .founder h2{font-family:var(--display);font-weight:700;font-size:clamp(1.9rem,3.6vw,2.7rem);letter-spacing:-.02em;line-height:1.1;margin-bottom:18px} .founder p{color:var(--muted);font-size:1.08rem;line-height:1.75;margin-bottom:18px} .founder p strong{color:var(--text);font-weight:600} .acronym{display:grid;gap:10px} .acro-row{display:flex;align-items:baseline;gap:16px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 20px;box-shadow:var(--shadow)} .acro-row .letter{font-family:var(--display);font-weight:800;font-size:1.4rem;width:30px} .acro-row:nth-child(1) .letter{color:var(--red)} .acro-row:nth-child(2) .letter{color:var(--amber)} .acro-row:nth-child(3) .letter{color:var(--gold)} .acro-row:nth-child(4) .letter{color:var(--red)} .acro-row:nth-child(5) .letter{color:var(--amber)} .acro-row .word{font-size:1.02rem;color:var(--text)} /* ---- SUB-HUB CARDS (AI / Learn) ---- */ .sub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .sub-grid.two{grid-template-columns:repeat(2,1fr)} .sub{position:relative;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:30px;box-shadow:var(--shadow);transition:transform .2s,border-color .2s,box-shadow .2s} .sub:hover{transform:translateY(-5px);border-color:var(--line-strong);box-shadow:var(--shadow-lg)} .sub-emoji{font-size:1.7rem;line-height:1;margin-bottom:18px} .sub h3{font-family:var(--display);font-weight:600;font-size:1.3rem;letter-spacing:-.01em;margin-bottom:10px} .sub p{color:var(--muted);font-size:.98rem;line-height:1.6;flex:1} .sub .status{font-family:var(--mono);font-size:.64rem;letter-spacing:.07em;text-transform:uppercase;padding:4px 10px;border-radius:999px;border:1px solid var(--line);color:var(--muted-2);position:absolute;top:24px;right:24px;background:#fff} .sub .status.live{color:#1F9D57;border-color:rgba(31,157,87,.4);background:rgba(31,157,87,.08)} .sub .enter{display:inline-flex;align-items:center;gap:8px;margin-top:20px;font-family:var(--mono);font-size:.84rem;color:var(--accent);transition:gap .2s} .sub:hover .enter{gap:14px} .sub.soon{opacity:.96} .sub.soon .enter{color:var(--muted-2)} /* ---- SPOKE CARDS ---- */ .spoke-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .spoke{display:flex;align-items:flex-start;gap:14px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px;box-shadow:var(--shadow);transition:transform .2s,border-color .2s,box-shadow .2s} .spoke:hover{transform:translateY(-3px);border-color:var(--line-strong);box-shadow:var(--shadow-lg)} .spoke .em{font-size:1.3rem;line-height:1;flex:none} .spoke h3{font-family:var(--display);font-weight:600;font-size:1.08rem;letter-spacing:-.01em;margin-bottom:5px} .spoke p{color:var(--muted);font-size:.9rem;line-height:1.5} /* ---- SERVICES / STEPS (AI) ---- */ .services{background:var(--ink-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:32px} .step{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:30px;box-shadow:var(--shadow);transition:transform .2s,border-color .2s,box-shadow .2s} .step:hover{transform:translateY(-4px);border-color:var(--line-strong);box-shadow:var(--shadow-lg)} .step .num{font-family:var(--mono);font-size:.78rem;color:var(--accent);letter-spacing:.1em;margin-bottom:16px;display:block} .step h3{font-family:var(--display);font-weight:600;font-size:1.22rem;letter-spacing:-.01em;margin-bottom:10px} .step p{color:var(--muted);font-size:.98rem;line-height:1.6} .svc-offer{display:flex;flex-wrap:wrap;align-items:center;gap:11px} .svc-offer .lead{font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);margin-right:4px} .tag{font-family:var(--mono);font-size:.74rem;color:var(--muted);background:#fff;border:1px solid var(--line);padding:6px 12px;border-radius:8px} /* ---- FEATURE STRIP (Learn) ---- */ .feature{background:var(--ink-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center} .feature .kicker{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:14px} .feature h2{font-family:var(--display);font-weight:700;font-size:clamp(1.8rem,3.4vw,2.6rem);letter-spacing:-.02em;line-height:1.1;margin-bottom:16px} .feature p{color:var(--muted);font-size:1.06rem;line-height:1.72;margin-bottom:18px} .feature p strong{color:var(--text);font-weight:600} .feature-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:34px;box-shadow:var(--shadow)} .feature-card .label{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);margin-bottom:16px} .feat-row{display:flex;gap:12px;align-items:baseline;margin-bottom:12px} .feat-row:last-child{margin-bottom:0} .feat-row .tick{color:var(--accent)} .feat-row .v{color:var(--muted);font-size:.98rem} /* ---- STORE landing ---- */ .store-page{min-height:100vh;display:flex;flex-direction:column} .soon-wrap{flex:1;position:relative;overflow:hidden;padding:150px 0 90px} .soon-glow{position:absolute;top:-150px;left:50%;transform:translateX(-50%);width:820px;height:640px;background:radial-gradient(circle at center,rgba(226,6,19,.10),rgba(236,162,0,.06) 40%,transparent 68%);filter:blur(12px);pointer-events:none;z-index:0} .soon-inner{position:relative;z-index:1;text-align:center;max-width:60ch;margin:0 auto} .soon-badge{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent-shadow);padding:8px 16px;border-radius:999px;margin-bottom:26px} .soon-badge .d{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)} .store-page h1{font-family:var(--display);font-weight:800;font-size:clamp(2.6rem,7vw,5rem);line-height:1.02;letter-spacing:-.03em;margin-bottom:22px} .store-page h1 .accent{color:var(--accent)} .lede{font-size:1.18rem;color:var(--muted);max-width:48ch;margin:0 auto 40px;line-height:1.68} .lede strong{color:var(--text);font-weight:600} .preview{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:820px;margin:0 auto 44px} .preview.two{grid-template-columns:repeat(2,1fr);max-width:560px;margin-bottom:36px} .pv{display:block;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:28px;text-align:left;box-shadow:var(--shadow);transition:transform .2s,border-color .2s,box-shadow .2s} .pv:hover{transform:translateY(-4px);border-color:var(--line-strong);box-shadow:var(--shadow-lg)} .pv .emoji{font-size:1.7rem;line-height:1;margin-bottom:14px} .pv h3{font-family:var(--display);font-weight:600;font-size:1.2rem;letter-spacing:-.01em;margin-bottom:8px} .pv p{color:var(--muted);font-size:.95rem;line-height:1.55} .pv.live{border-color:var(--accent-shadow)} .pv.live:hover{border-color:var(--accent)} .pv.live p strong{color:var(--accent);font-weight:600} .pv.featured{max-width:560px;margin:0 auto 18px;text-align:center} .pv.featured .emoji{font-size:2.1rem} .pv.featured h3{font-size:1.45rem} .live-tag{font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent-shadow);padding:3px 8px;border-radius:999px;vertical-align:middle;margin-left:7px} .soon-tag{font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2);background:#fff;border:1px solid var(--line-strong);padding:3px 8px;border-radius:999px;vertical-align:middle;margin-left:7px} /* ---- generic CONTACT band ---- */ .contact{text-align:center;padding:104px 0} .contact h2{font-family:var(--display);font-weight:800;font-size:clamp(2.2rem,5vw,3.8rem);letter-spacing:-.025em;line-height:1.04;margin-bottom:20px} .contact h2 .accent{color:var(--accent)} .contact p{color:var(--muted);font-size:1.12rem;max-width:46ch;margin:0 auto 36px} .contact-row{display:flex;flex-wrap:wrap;gap:14px;justify-content:center} /* ---- FOOTER ---- */ footer{border-top:1px solid var(--line);padding:42px 0;background:var(--ink-2)} .foot-inner{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center} .foot-brand{font-family:var(--display);font-weight:700;font-size:1.05rem} .foot-brand span{display:block;font-family:var(--mono);font-size:.72rem;font-weight:400;color:var(--muted-2);letter-spacing:.06em;margin-top:5px} .foot-links{display:flex;gap:24px} .foot-links a{font-family:var(--mono);font-size:.85rem;color:var(--muted);transition:color .2s} .foot-links a:hover{color:var(--accent)} .foot-copy{font-family:var(--mono);font-size:.78rem;color:var(--muted-2);width:100%;margin-top:8px} /* ---- REVEAL on scroll + focus ---- */ .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)} .reveal.in{opacity:1;transform:none} a:focus-visible,.btn:focus-visible,button:focus-visible,.eco-node:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px} /* ---- responsive ---- */ @media(max-width:900px){ .eco-stage{grid-template-columns:1fr;gap:28px} .eco-viz{max-width:420px} } @media(max-width:820px){ .nav-links{position:fixed;inset:72px 0 auto 0;background:rgba(255,255,255,.97);backdrop-filter:blur(12px);flex-direction:column;align-items:flex-start;gap:4px;padding:18px 28px 26px;border-bottom:1px solid var(--line);box-shadow:0 12px 28px rgba(26,18,11,.08);transform:translateY(-130%);transition:transform .35s} .nav-links.open{transform:translateY(0)} .nav-links a{font-size:1.05rem;padding:10px 0;width:100%} .nav-links .nav-cta{margin-top:8px} .menu-btn{display:block} .doors-grid{grid-template-columns:1fr} .founder-grid{grid-template-columns:1fr;gap:34px} .sub-grid,.sub-grid.two,.steps{grid-template-columns:1fr} .spoke-grid{grid-template-columns:1fr} .feature-grid{grid-template-columns:1fr;gap:34px} .preview,.preview.two{grid-template-columns:1fr;max-width:380px} .hero{padding:130px 0 50px} .hero.home{padding:150px 0 56px} body{font-size:16px} } @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}} /* ========================================================================= COMMERCIAL PAGES — services, portfolio, products, pricing, about, forms Added for the commercial launch. Uses the existing token set only. ========================================================================= */ /* Skip link — keyboard users land here first */ .skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent);color:#fff; padding:10px 16px;border-radius:0 0 8px 0;font-weight:600;text-decoration:none} .skip:focus{left:0} /* Soft banded section */ .band-soft{background:var(--ink-2);border-block:1px solid var(--line)} /* Hero variant for the commercial home page */ .hero.home-lead{padding:150px 0 60px} .hero.home-lead h1{max-width:16ch} .hero-facts{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:26px; font-size:.93rem;color:var(--muted)} .hero-facts strong{color:var(--text)} .hero-facts .dot{color:var(--muted-2)} /* Tick lists */ .ticks{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:8px} .ticks li{position:relative;padding-left:26px;font-size:.94rem;color:var(--muted)} .ticks li::before{content:"";position:absolute;left:4px;top:.52em;width:9px;height:5px; border-left:2px solid var(--accent);border-bottom:2px solid var(--accent); transform:rotate(-45deg)} .ticks li strong{color:var(--text)} .ticks.spaced li{margin-bottom:2px} /* Two-way split: built-for-you vs ready-made */ .twoway{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:20px} .way{background:var(--panel);border:1px solid var(--line);border-radius:14px; padding:26px 26px 24px;box-shadow:var(--shadow);display:flex;flex-direction:column} .way-tag{display:inline-block;align-self:flex-start;font-family:"JetBrains Mono",monospace; font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px; border-radius:999px;background:var(--red-soft);color:var(--red);margin-bottom:14px} .way-tag.alt{background:var(--gold-soft);color:#8a5e00} .way h3{font-size:1.4rem;margin:0 0 8px} .way > p{color:var(--muted);font-size:.96rem;margin:0} .way .enter{margin-top:auto;padding-top:20px} /* Work / case-study cards */ .work-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px} .work{background:var(--panel);border:1px solid var(--line);border-radius:14px; padding:24px;box-shadow:var(--shadow);display:flex;flex-direction:column} .work.feature-work{border-color:var(--accent-soft);box-shadow:var(--shadow-lg)} .work-head{display:flex;justify-content:space-between;align-items:center;gap:12px; flex-wrap:wrap;margin-bottom:12px} .work-kind{font-family:"JetBrains Mono",monospace;font-size:.68rem;letter-spacing:.08em; text-transform:uppercase;color:var(--muted-2)} .work h3{font-size:1.35rem;margin:0 0 8px} .work > p{color:var(--muted);font-size:.95rem;margin:0} .stack{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 0;padding:0} .stack li{font-family:"JetBrains Mono",monospace;font-size:.72rem;padding:3px 9px; border:1px solid var(--line-strong);border-radius:6px;color:var(--muted)} .work > p.work-note{font-size:.85rem;color:var(--muted-2);margin:14px 0 0; font-style:italic} .work-links{display:flex;gap:16px;margin-top:auto;padding-top:18px;flex-wrap:wrap} .work-links a{font-weight:600;font-size:.9rem;color:var(--accent);text-decoration:none} .work-links a:hover{text-decoration:underline} .work-more{margin-top:26px;text-align:center} /* Wider SMOALD — the demoted brand-house band */ .wider{border-top:1px solid var(--line)} .doors-mini{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px} .dm{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px; text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:6px; transition:border-color .2s,transform .2s} .dm:hover{border-color:var(--accent-soft);transform:translateY(-2px)} .dm h3{font-size:1.08rem;margin:0} .dm p{font-size:.9rem;color:var(--muted);margin:0} .dm-stat{margin-top:8px} /* Enquiry section + form */ .enquire-sec{background:var(--ink-2);border-top:1px solid var(--line)} .enquire-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:44px;align-items:start} .enquire-lede{color:var(--muted);margin-top:10px;max-width:46ch} .enquire-alt{margin-top:22px;font-size:.92rem;color:var(--muted)} .enquiry-form{background:var(--panel);border:1px solid var(--line);border-radius:14px; padding:26px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:15px} .field{display:flex;flex-direction:column;gap:6px} .field label{font-size:.86rem;font-weight:600;color:var(--text)} .field .opt{font-weight:400;color:var(--muted-2)} .field input,.field select,.field textarea{ font:inherit;font-size:.94rem;color:var(--text);background:var(--ink); border:1px solid var(--line-strong);border-radius:8px;padding:10px 12px;width:100%; transition:border-color .18s,box-shadow .18s} .field textarea{resize:vertical;min-height:96px} .field input:focus,.field select:focus,.field textarea:focus{ outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)} .field input:user-invalid,.field textarea:user-invalid,.field select:user-invalid{ border-color:var(--red)} .field.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .form-submit{margin-top:4px;width:100%;justify-content:center;border:none;cursor:pointer} .form-submit[disabled]{opacity:.6;cursor:progress} .form-small{font-size:.8rem;color:var(--muted-2);margin:0;text-align:center} .form-small a{color:var(--muted)} .form-status{font-size:.9rem;margin:0;text-align:center;min-height:1.2em} .form-status.ok{color:#15794A;font-weight:600} .form-status.err{color:var(--red);font-weight:600} /* Footer legal block */ .foot-legal{width:100%;margin-top:18px;padding-top:16px;border-top:1px solid var(--line); font-size:.82rem;color:var(--muted-2);display:flex;flex-direction:column;gap:5px} .foot-legal p{margin:0} .foot-legal strong{color:var(--muted)} @media(max-width:860px){ .enquire-grid{grid-template-columns:1fr;gap:30px} } @media(max-width:640px){ .hero.home-lead{padding:126px 0 46px} .hero-facts{gap:6px 10px} .way,.work,.enquiry-form{padding:20px} } /* ---- active nav state ---- */ .nav-links a.active{color:var(--accent)} /* `.nav-links a` (0,1,1) outranks `.nav-cta` (0,1,0), so without this the CTA button renders muted grey on the accent fill instead of white. */ .nav-links a.nav-cta, .nav-links a.nav-cta:hover, .nav-links a.nav-cta.active{color:var(--on-accent)} /* ---- wider wrap for price tables ---- */ .wrap-x{width:min(1180px,100% - 44px);margin-inline:auto} /* ---- services list ---- */ .svc-list{display:flex;flex-direction:column;gap:18px} .svc{display:grid;grid-template-columns:1fr 230px;gap:28px;background:var(--panel); border:1px solid var(--line);border-radius:14px;padding:28px;box-shadow:var(--shadow)} .svc h3{font-size:1.45rem;margin:0 0 10px} .svc-main > p{color:var(--muted);font-size:.96rem;margin:0} .svc-main > p.svc-proof{margin-top:16px;font-size:.9rem;color:var(--muted); border-left:2px solid var(--gold);padding-left:14px} .svc-side{display:flex;flex-direction:column;gap:6px;align-items:flex-start; border-left:1px solid var(--line);padding-left:26px} .svc-price{font-family:"Bricolage Grotesque",sans-serif;font-size:1.6rem;font-weight:800; color:var(--text);line-height:1.1} .per{font-size:.8rem;font-weight:500;color:var(--muted)} .svc-time{font-size:.85rem;color:var(--muted-2)} .svc-btn{margin-top:12px} @media(max-width:820px){ .svc{grid-template-columns:1fr;gap:20px;padding:22px} .svc-side{border-left:none;border-top:1px solid var(--line);padding-left:0;padding-top:18px} } /* ---- terms grid ---- */ .terms-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px} .term{border-top:2px solid var(--accent);padding-top:14px} .term h4{font-size:1rem;margin:0 0 6px} .term p{font-size:.91rem;color:var(--muted);margin:0} /* ---- centred CTA band ---- */ .cta-band{text-align:center;max-width:640px} .cta-band h2{margin-bottom:10px} .cta-band p{color:var(--muted);margin-bottom:22px} .cta-band .cta-row{justify-content:center} /* ---- price tables ---- */ .tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px; background:var(--panel);box-shadow:var(--shadow)} .ptable{border-collapse:collapse;width:100%;min-width:640px;font-size:.92rem} .ptable th,.ptable td{text-align:left;padding:13px 16px; border-bottom:1px solid var(--line);vertical-align:top} .ptable thead th{font-family:"JetBrains Mono",monospace;font-size:.68rem;letter-spacing:.09em; text-transform:uppercase;color:var(--muted-2);font-weight:500;white-space:nowrap; background:var(--ink-2)} .ptable tbody tr:last-child td{border-bottom:none} .pname{font-weight:600;color:var(--text)} .pnum{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600} /* ---- note box ---- */ .note-box{margin-top:24px;background:var(--gold-soft);border-left:3px solid var(--gold); border-radius:0 10px 10px 0;padding:18px 22px} .note-box h4{margin:0 0 7px;font-size:1rem} .note-box p{margin:0;font-size:.93rem;color:var(--muted)} /* ---- FAQ ---- */ .faq{display:flex;flex-direction:column;gap:1px} .faq details{border-bottom:1px solid var(--line);padding:2px 0} .faq summary{cursor:pointer;padding:14px 0;font-weight:600;font-size:1rem; list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";font-family:"JetBrains Mono",monospace;color:var(--accent); font-size:1.2rem;flex-shrink:0} .faq details[open] summary::after{content:"−"} .faq summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px} .faq details p{margin:0 0 16px;color:var(--muted);font-size:.95rem;max-width:68ch} /* ---- how the job goes (collapsible, inside cards) ---- */ .how{margin-top:18px;border-top:1px solid var(--line);padding-top:4px} .how summary{cursor:pointer;padding:10px 0;font-weight:600;font-size:.95rem;list-style:none; display:flex;justify-content:space-between;align-items:center;gap:14px} .how summary::-webkit-details-marker{display:none} .how summary::after{content:"+";font-family:"JetBrains Mono",monospace;color:var(--accent);font-size:1.15rem;flex-shrink:0} .how[open] summary::after{content:"\2212"} .how summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px} .how-label{margin:10px 0 4px;font-family:"JetBrains Mono",monospace;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)} .how-why{margin:4px 0 12px;color:var(--muted);font-size:.93rem;max-width:68ch} .how-steps{margin:0 0 8px;padding-left:22px;display:flex;flex-direction:column;gap:8px; color:var(--muted);font-size:.93rem;max-width:68ch} .how-steps li::marker{color:var(--accent);font-family:"JetBrains Mono",monospace;font-size:.85rem} /* ---- case study ---- */ .case{background:var(--panel);border:1px solid var(--line);border-radius:16px; padding:32px;box-shadow:var(--shadow-lg)} .case + .case{margin-top:20px} .case h3{font-size:1.75rem;margin:0 0 4px} .case-sub{color:var(--muted-2);font-size:.95rem;margin:0 0 22px} .case-body h4{font-size:.78rem;font-family:"JetBrains Mono",monospace;letter-spacing:.1em; text-transform:uppercase;color:var(--accent);margin:22px 0 7px} .case-body p:not(.case-sub):not(.work-note){color:var(--muted); font-size:.97rem;margin:0} .case-note{margin-top:22px;background:var(--ink-2);border:1px solid var(--line); border-radius:10px;padding:15px 18px} .case-note p{font-size:.89rem;margin:0} .work-priv{font-size:.85rem;color:var(--muted-2);font-style:italic} @media(max-width:640px){.case{padding:22px}} /* ---- prose pages (about, legal) ---- */ .prose{max-width:68ch} .prose h2{margin:34px 0 12px;font-size:1.5rem} .prose h2:first-child{margin-top:0} .prose h3{margin:24px 0 8px;font-size:1.15rem} .prose p{margin:0 0 14px;color:var(--muted)} .prose strong{color:var(--text)} .prose ul:not(.ticks):not(.stack){color:var(--muted);padding-left:1.2em;margin:0 0 14px} .prose ul:not(.ticks):not(.stack) li{margin-bottom:7px} .h-sm{font-size:1.15rem;margin:0 0 12px} .numlist{counter-reset:n;list-style:none;padding:0;margin:0; display:flex;flex-direction:column;gap:12px} .numlist li{counter-increment:n;position:relative;padding-left:36px; font-size:.95rem;color:var(--muted)} .numlist li::before{content:counter(n);position:absolute;left:0;top:0;width:24px;height:24px; border-radius:50%;background:var(--accent-soft);color:var(--accent); font-family:"JetBrains Mono",monospace;font-size:.75rem;font-weight:500; display:grid;place-items:center} .numlist strong{color:var(--text)} /* ---- stack grid (about) ---- */ .stack-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:24px} .stack-col h4{margin:0 0 10px;padding-bottom:8px;border-bottom:1px solid var(--line); font-size:.95rem} /* ---- products ---- */ .prod-status{display:flex;gap:14px;align-items:flex-start;background:var(--gold-soft); border:1px solid var(--gold-line);border-radius:12px;padding:16px 20px;margin-bottom:26px} .prod-status p{margin:0;font-size:.93rem;color:var(--muted)} .prod-status strong{color:var(--text)} .ps-dot{width:9px;height:9px;border-radius:50%;background:var(--gold); flex-shrink:0;margin-top:7px} .prod-list{display:flex;flex-direction:column;gap:20px} .prod{display:grid;grid-template-columns:1fr 250px;gap:30px;background:var(--panel); border:1px solid var(--line);border-radius:16px;padding:30px;box-shadow:var(--shadow)} .prod h2{font-size:1.6rem;margin:0 0 4px} .prod-body > p{color:var(--muted);font-size:.96rem;margin:0} /* Declared after, and matched on the same element, so the subtitle keeps its gap — `.prod-body > p` (0,1,1) would otherwise flatten `.prod-sub` (0,1,0). */ .prod-body > p.prod-sub{color:var(--muted-2);font-size:.94rem;margin:0 0 18px} .prod-body h4{font-size:.78rem;font-family:"JetBrains Mono",monospace;letter-spacing:.1em; text-transform:uppercase;color:var(--accent);margin:22px 0 7px} .prod-caveat{margin-top:20px;background:var(--ink-2);border:1px solid var(--line); border-radius:10px;padding:14px 17px} .prod-caveat p{margin:0;font-size:.88rem;color:var(--muted)} .prod-side{display:flex;flex-direction:column;gap:7px;align-items:flex-start; border-left:1px solid var(--line);padding-left:28px} .prod-price{font-family:"Bricolage Grotesque",sans-serif;font-size:1.35rem;font-weight:800; line-height:1.15} .prod-note{font-size:.82rem;color:var(--muted-2)} .prod-btn{margin-top:12px;width:100%;justify-content:center;text-align:center} .prod-demo{font-size:.88rem;color:var(--accent);text-decoration:none;margin-top:10px; font-weight:600} .prod-demo:hover{text-decoration:underline} @media(max-width:860px){ .prod{grid-template-columns:1fr;gap:22px;padding:22px} .prod-side{border-left:none;border-top:1px solid var(--line);padding-left:0;padding-top:20px} } /* ---- contact hero is shorter ---- */ .hero.contact-hero{padding-bottom:30px} /* ---- value list: a claim plus what it prevents ---- */ .vlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px} .vlist li{display:flex;flex-direction:column;gap:3px;padding-left:16px; border-left:2px solid var(--gold-line)} .vlist strong{font-size:.97rem;color:var(--text)} .vlist span{font-size:.91rem;color:var(--muted);line-height:1.6} /* ---- price anchoring block ---- */ .vs{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center; background:var(--ink-2);border:1px solid var(--line);border-radius:12px; padding:20px 22px;margin:22px 0 4px} .vs-side{display:flex;flex-direction:column;gap:3px} .vs-label{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em; text-transform:uppercase;color:var(--muted-2)} .vs-big{font-family:var(--display);font-size:1.5rem;font-weight:800;line-height:1.1; color:var(--muted)} .vs-ours .vs-big{color:var(--accent)} .vs-note{font-size:.84rem;color:var(--muted);line-height:1.5} .vs-arrow{font-size:1.3rem;color:var(--muted-2);line-height:1} @media(max-width:620px){ .vs{grid-template-columns:1fr;gap:14px;text-align:left} .vs-arrow{transform:rotate(90deg);justify-self:start} } /* ---- proof panel ---- */ .proof{margin-top:24px;background:var(--accent-soft);border:1px solid var(--red-line); border-radius:12px;padding:18px 22px} .proof-label{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.12em; text-transform:uppercase;color:var(--accent);margin-bottom:8px} .proof p{margin:0;font-size:.93rem;color:var(--muted)} .proof strong{color:var(--text)} .proof-links{display:flex;gap:18px;flex-wrap:wrap;margin-top:12px} .proof-links a{font-size:.88rem;font-weight:600;color:var(--accent)} .proof-links a:hover{text-decoration:underline} /* ---- product side note ---- */ .prod-side-note{font-size:.8rem;color:var(--muted-2);margin-top:12px;line-height:1.5} /* ---- fit / not-fit ---- */ .fitgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:20px} .fit{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:24px; box-shadow:var(--shadow)} .fit h4{font-size:1.08rem;margin:0 0 14px;padding-bottom:10px; border-bottom:1px solid var(--line)} .fit-yes h4{color:#15794A} .fit-no h4{color:var(--muted)} /* Same list, opposite meaning — swap the tick for a cross rather than just greying it, or a "don't buy if" item still reads as a feature. */ .ticks-no li::before{content:"\00D7";border:none;transform:none; width:auto;height:auto;left:3px;top:0; font-family:var(--mono);font-size:1rem;line-height:1.5;color:var(--muted-2)} .fit-alt{margin-top:16px;padding-top:14px;border-top:1px solid var(--line); font-size:.88rem;color:var(--muted)} /* ---- fixed-price jobs ---- */ .fixed-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px} .fx{background:var(--panel);border:1px solid var(--line);border-radius:14px; padding:24px;box-shadow:var(--shadow);display:flex;flex-direction:column} .fx-head{display:flex;justify-content:space-between;align-items:baseline;gap:14px; margin-bottom:10px} .fx-head h3{font-size:1.15rem;margin:0} /* The number is the point of this section, so it gets the display face. */ .fx-price{font-family:var(--display);font-size:1.5rem;font-weight:800; color:var(--accent);line-height:1;white-space:nowrap} .fx > p{color:var(--muted);font-size:.93rem;margin:0} .fx-foot{display:flex;justify-content:space-between;align-items:center;gap:12px; margin-top:auto;padding-top:18px} .fx-time{font-family:var(--mono);font-size:.76rem;letter-spacing:.06em; text-transform:uppercase;color:var(--muted-2)} .fx-cta{font-weight:600;font-size:.9rem;color:var(--accent);text-decoration:none} .fx-cta:hover{text-decoration:underline} .fx-note{margin-top:24px;font-size:.88rem;color:var(--muted);max-width:70ch} @media(max-width:640px){.fx{padding:20px}} /* ---- product: live status, shot, and licence tiers ---- */ .prod-status.is-live{background:var(--red-soft);border-color:var(--red-line)} .prod-status.is-live .ps-dot{background:var(--red)} .prod-shot{display:block;width:100%;height:auto;border-radius:12px; border:1px solid var(--line);box-shadow:var(--shadow);margin:0 0 20px} .demo-callout{background:var(--gold-soft);border-left:3px solid var(--gold); border-radius:0 8px 8px 0;padding:14px 18px;margin:0 0 4px;font-size:.93rem; color:var(--muted)} .demo-callout a{color:var(--accent);text-decoration:none} .demo-callout a:hover{text-decoration:underline} /* Three tiers stacked in the buy column. The middle one is lifted because it is the one most buyers should choose, not because it earns most. */ .tier{width:100%;border:1px solid var(--line);border-radius:12px;padding:16px; margin-bottom:12px;background:var(--panel);display:flex;flex-direction:column;gap:3px} .tier-featured{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)} .tier-name{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em; text-transform:uppercase;color:var(--muted-2)} .tier-price{font-family:var(--display);font-size:1.7rem;font-weight:800; line-height:1.05;color:var(--text)} .tier-what{font-size:.84rem;color:var(--muted);margin-bottom:10px} .tier-btn{width:100%;justify-content:center;text-align:center;font-size:.88rem} /* ── Brand-first homepage (2026-09-13) ────────────────────────────── The red/gold SMOALD wordmark and the four doors sit back on top of the web-development offer. Gold (#ECA200) is too faint for body text on white, so it goes on the big shapes; small text uses the darker readable gold (#9A6B00), same as the Learn/Live buttons. */ .brand-hero{padding:186px 0 84px} .brand-hero .hero-glow{background:radial-gradient(circle at center,rgba(236,162,0,.11),rgba(226,6,19,.05) 42%,transparent 70%)} .brand-hero .hero-tag{color:#9A6B00;font-size:.72rem;letter-spacing:.42em;margin-bottom:22px;opacity:.85} .brand-hero .hero-wordmark{font-size:clamp(2.4rem,6.4vw,4.4rem);font-weight:700;letter-spacing:.06em;line-height:1;margin-bottom:34px;filter:none} .brand-hero h1{font-family:var(--body);font-size:clamp(1.35rem,2.5vw,1.95rem);font-weight:500;line-height:1.3;letter-spacing:-.01em;color:var(--text);max-width:34ch;margin:0 auto 16px} .brand-hero h1 .accent{font-weight:600} .brand-hero .hero-sub{font-size:1rem;max-width:50ch;margin-bottom:30px} .brand-hero .cta-row{justify-content:center} .brand-hero .hero-facts{justify-content:center;margin-top:30px} .brand-hero .hero-facts strong{color:#9A6B00} .brand-hero .hero-founder{margin:44px 0 14px;color:var(--muted-2);font-size:.76rem;letter-spacing:.08em} .brand-hero .hero-btns{gap:10px} .brand-hero .hero-btn{font-size:.9rem;font-weight:500;padding:10px 20px;border-radius:999px;background:transparent} .brand-hero .hero-btn:hover{transform:translateY(-1px)} .brand-hero .hero-btn.build:hover,.brand-hero .hero-btn.shop:hover{background:var(--red-soft);box-shadow:none} .brand-hero .hero-btn.learn:hover,.brand-hero .hero-btn.life:hover{background:var(--gold-soft);box-shadow:none} .brand-home .doors{padding:0 0 70px} .brand-home .door.learn h2,.brand-home .door.life h2{color:#9A6B00} .brand-home .door.learn .verb,.brand-home .door.life .verb{color:#9A6B00} .brand-home .door.build .verb,.brand-home .door.shop .verb{color:var(--red)} /* gold threaded through the rest of the page */ .brand-home .eyebrow{color:#9A6B00} .brand-home .section-head h2::after{content:"";display:block;width:56px;height:4px;border-radius:999px;margin-top:16px; background:linear-gradient(90deg,var(--gold),#FFD75E 55%,var(--red))} .brand-home .step .num{color:#9A6B00} .brand-home .step:hover{border-color:var(--gold-line)} .brand-home .spoke:hover{border-color:var(--gold-line)} .brand-home .live-tag{color:#9A6B00;background:var(--gold-soft);border-color:var(--gold-line)} .brand-home .band-soft{background:linear-gradient(180deg,var(--ink-2),rgba(236,162,0,.05))} @media (max-width:640px){ .brand-hero{padding:136px 0 56px} .brand-hero .hero-wordmark{margin-bottom:26px} .brand-hero .hero-btn{padding:9px 16px;font-size:.86rem} }