/* ====================================================== SUMIKA NOVA — Brand Website Palette sampled from brand mark: cyan #00bffd · blue #0170df · violet #502db5 · magenta #92229a pink #c4287f · red #e6375b · ember #fb5739 · brass #cda06b ====================================================== */ :root{ --bg: #08080a; --bg-alt: #0d0d10; --panel: #131317; --panel-2: #17171d; --border: rgba(255,255,255,0.09); --border-soft: rgba(255,255,255,0.05); --text: #f3efe8; --text-dim: #a9a5a0; --text-faint: #706c6a; --brass: #cda06b; --brass-dim: rgba(205,160,107,0.35); --grad: linear-gradient(92deg,#00bffd 0%,#0170df 20%,#502db5 40%,#92229a 58%,#c4287f 74%,#e6375b 88%,#fb5739 100%); --grad-soft: linear-gradient(92deg,rgba(0,191,253,.5),rgba(1,112,223,.5),rgba(80,45,181,.5),rgba(146,34,154,.5),rgba(196,40,127,.5),rgba(230,55,91,.5),rgba(251,87,57,.5)); --radius: 18px; --radius-sm: 12px; --maxw: 1180px; --shadow: 0 30px 80px -30px rgba(0,0,0,0.7); } /* Light theme — same brand accent (brass) and gradient, warm ivory surfaces instead of near-black, deep espresso text instead of cream. Toggled site-wide from /dashboard/site-content (Appearance) — see partials/head.ejs, which sets [data-theme] on from the `_shared.site_theme` page_content field. Everything else (layout, spacing, components) is unchanged between themes; only these variables differ. */ :root[data-theme="light"]{ --bg: #f7f1e4; --bg-alt: #f0e8d6; --panel: #fffdf9; --panel-2: #f7f0e2; --border: rgba(36,26,16,0.12); --border-soft: rgba(36,26,16,0.06); --text: #241a10; --text-dim: #5b4c3a; --text-faint: #8c7a63; --brass: #a3702f; --brass-dim: rgba(163,112,47,0.3); --shadow: 0 30px 80px -30px rgba(60,42,20,0.25); } *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0; background:var(--bg); color:var(--text); font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif; font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; } h1,h2,h3,h4{ font-family:'Fraunces','Cormorant Garamond',serif; font-weight:500; line-height:1.12; letter-spacing:-0.01em; margin:0 0 .5em; color:var(--text); } h1{font-size:clamp(2.4rem,5.4vw,4.6rem); font-weight:440;} h2{font-size:clamp(1.9rem,3.6vw,3rem);} h3{font-size:clamp(1.25rem,2vw,1.6rem);} p{margin:0 0 1em; color:var(--text-dim);} a{color:inherit; text-decoration:none;} img{max-width:100%; display:block;} .container{max-width:var(--maxw); margin:0 auto; padding:0 28px;} .eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--brass); font-weight:600; margin-bottom:16px; } .eyebrow::before{content:""; width:22px; height:1px; background:var(--brass);} .grad-text{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; } .section{padding:112px 0;} .section--tight{padding:72px 0;} .section-head{max-width:640px; margin-bottom:56px;} .section-head.center{margin-left:auto; margin-right:auto; text-align:center;} /* ---------- buttons ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:15px 30px; border-radius:100px; font-size:.92rem; font-weight:600; font-family:'Inter',sans-serif; cursor:pointer; border:1px solid transparent; transition:transform .25s ease, box-shadow .25s ease, opacity .25s ease, border-color .25s ease, background .25s ease; white-space:nowrap; } .btn-primary{ background:var(--grad); color:#08080a; font-weight:700; box-shadow:0 12px 32px -10px rgba(146,34,154,.55); } .btn-primary:hover{transform:translateY(-2px); box-shadow:0 16px 40px -10px rgba(146,34,154,.7);} .btn-ghost{ background:transparent; border-color:var(--border); color:var(--text); } .btn-ghost:hover{border-color:var(--brass-dim); background:rgba(255,255,255,0.03);} .btn-block{width:100%;} .btn-sm{padding:11px 20px; font-size:.82rem;} /* ---------- nav ---------- */ header.site-nav{ position:sticky; top:0; z-index:100; background:rgba(8,8,10,0.72); backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%); border-bottom:1px solid var(--border-soft); } .nav-row{ display:flex; align-items:center; justify-content:space-between; height:76px; } .brand{display:flex; align-items:center; gap:11px;} .brand img{height:34px; width:auto; border-radius:8px;} .brand-word{font-family:'Fraunces',serif; font-size:1.12rem; letter-spacing:.02em; font-weight:600;} .brand-word b{color:var(--brass); font-weight:600;} .nav-links{display:flex; align-items:center; gap:34px;} .nav-links a{ font-size:.88rem; color:var(--text-dim); font-weight:500; letter-spacing:.01em; padding:6px 0; position:relative; transition:color .2s; } .nav-links a::after{ content:""; position:absolute; left:0; right:0; bottom:-3px; height:1px; background:var(--grad); transform:scaleX(0); transform-origin:left; transition:transform .3s; } .nav-links a:hover, .nav-links a.active{color:var(--text);} .nav-links a:hover::after, .nav-links a.active::after{transform:scaleX(1);} .nav-cta{display:flex; align-items:center; gap:18px;} .nav-burger{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px;} .nav-burger span{width:22px; height:1.5px; background:var(--text); display:block;} .mobile-panel{ display:none; position:fixed; inset:76px 0 0 0; z-index:99; /* was a hardcoded near-black; on the light theme this trapped the (already-dark) --text color links against a near-black panel */ background:var(--bg); flex-direction:column; padding:32px 28px; gap:22px; } .mobile-panel a{font-size:1.2rem; font-family:'Fraunces',serif; color:var(--text);} .mobile-panel.open{display:flex;} /* ---------- hero ---------- */ .hero{ position:relative; padding:88px 0 60px; background: radial-gradient(60% 55% at 82% 8%, rgba(146,34,154,.22), transparent 60%), radial-gradient(50% 45% at 8% 0%, rgba(0,191,253,.16), transparent 60%); } .hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; } .hero-copy p.lead{font-size:1.12rem; color:var(--text-dim); max-width:520px;} .hero-cta{display:flex; gap:16px; margin-top:34px; flex-wrap:wrap;} .hero-trust{ display:flex; gap:28px; margin-top:52px; flex-wrap:wrap; padding-top:28px; border-top:1px solid var(--border-soft); } .hero-trust div{font-size:.78rem; color:var(--text-faint); max-width:195px; line-height:1.45;} .hero-trust strong{display:block; color:var(--text); font-family:'Fraunces',serif; font-size:1.15rem; font-weight:500; margin-bottom:2px;} .phone-stage{position:relative; display:flex; justify-content:center;} .phone-glow{ position:absolute; inset:-40px; background:var(--grad); filter:blur(90px); opacity:.35; border-radius:50%; } .phone-frame{ position:relative; width:280px; border-radius:38px; padding:10px; background:linear-gradient(160deg,#2a2a30,#0d0d10 60%); box-shadow:var(--shadow), inset 0 0 0 1px rgba(255,255,255,.08); } .phone-frame img{border-radius:30px; width:100%;} .phone-frame.floaty{animation:floaty 6s ease-in-out infinite;} @keyframes floaty{0%,100%{transform:translateY(0);}50%{transform:translateY(-14px);}} /* ---------- trust bar ---------- */ .trust-bar{ border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft); padding:26px 0; background:var(--bg-alt); } .trust-bar .row{ display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; font-size:.78rem; letter-spacing:.07em; text-transform:uppercase; color:var(--text-faint); font-weight:600; } /* ---------- cards / grid ---------- */ .grid{display:grid; gap:22px;} .grid-2{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:repeat(3,1fr);} .grid-4{grid-template-columns:repeat(4,1fr);} .grid-5{grid-template-columns:repeat(5,1fr);} .card{ background:linear-gradient(180deg,var(--panel),var(--panel-2)); border:1px solid var(--border); border-radius:var(--radius); padding:30px 26px; transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease; } .card:hover{transform:translateY(-4px); border-color:rgba(255,255,255,.16); box-shadow:var(--shadow);} .card .icon{ width:46px; height:46px; border-radius:13px; display:flex; align-items:center; justify-content:center; background:var(--grad); margin-bottom:18px; font-size:1.25rem; } .card h3{margin-bottom:10px;} .card p{margin-bottom:0; font-size:.93rem;} .team-card{text-align:center;} .team-photo{ width:88px; height:88px; border-radius:50%; object-fit:cover; margin:0 auto 16px; display:block; border:1px solid var(--border); } .team-photo-placeholder{background:var(--panel-2);} .team-role{color:var(--brass); font-size:.85rem; margin-bottom:10px;} /* ---------- layout editor ("move anything anywhere") ---------- Custom drag offsets only ever apply at desktop widths — this is the one rule that makes it so. Below 900px, --dx/--dy are simply never read, so every page always falls back to its normal stacked mobile layout regardless of what's been dragged on desktop. See public/js/layout-editor.js and src/views/partials/layout-editor.ejs. */ @media (min-width:900px){ [data-block]{ transform:translate(var(--dx,0px), var(--dy,0px)); } } body.layout-edit-mode [data-block]{ outline:1px dashed var(--brass-dim); outline-offset:6px; cursor:move; position:relative; } body.layout-edit-mode [data-block]:hover{ outline-color:var(--brass); } body.layout-edit-mode [data-block].dragging{ outline-color:#fff; z-index:80; opacity:.92; } .layout-edit-toggle{ position:fixed; right:24px; bottom:24px; z-index:1000; background:var(--panel); border:1px solid var(--border); color:var(--text); padding:13px 20px; border-radius:999px; font-size:.85rem; font-weight:600; cursor:pointer; box-shadow:var(--shadow); font-family:inherit; } .layout-edit-toggle.active{ background:var(--grad); color:#fff; border-color:transparent; } .layout-edit-hint{ position:fixed; left:50%; top:18px; transform:translateX(-50%); z-index:1000; background:var(--panel); border:1px solid var(--border); padding:10px 20px; border-radius:999px; font-size:.78rem; color:var(--text-dim); box-shadow:var(--shadow); display:none; max-width:92vw; text-align:center; } body.layout-edit-mode .layout-edit-hint{ display:block; } @media (max-width:899px){ .layout-edit-toggle, .layout-edit-hint{ display:none !important; } } /* ---------- philosophy / split ---------- */ .split{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;} .split.reverse .split-media{order:2;} /* When a section-visibility toggle (Site Content) hides one side of a two-column split, the remaining side spans the full width instead of leaving an empty column. */ .split > *:only-child{grid-column:1 / -1;} .motif{ position:absolute; opacity:.5; pointer-events:none; } .split-media{position:relative;} .split-media .shot-frame{ border-radius:24px; overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow); position:relative; } .split-media .shot-frame::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,.5)); } /* ---------- app showcase ---------- */ .showcase-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; } .showcase-item{ border-radius:22px; overflow:hidden; border:1px solid var(--border); background:var(--panel); position:relative; } .showcase-item img{width:100%; display:block;} .showcase-cap{ padding:16px 18px 20px; } .showcase-cap .tag{font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--brass); font-weight:700;} .showcase-cap h4{font-family:'Inter',sans-serif; font-size:.96rem; font-weight:600; margin:6px 0 4px; color:var(--text);} .showcase-cap p{font-size:.82rem; margin:0;} /* ---------- stat / metric strip ---------- */ .stat-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;} .stat{ border:1px solid var(--border); border-radius:var(--radius-sm); padding:26px 22px; background:var(--panel); } .stat .n{font-family:'Fraunces',serif; font-size:2.1rem; color:var(--text);} .stat .l{font-size:.8rem; color:var(--text-faint); margin-top:6px;} /* ---------- placeholder tag ---------- */ .ph{ display:inline-block; font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:#08080a; background:var(--brass); padding:2px 8px; border-radius:6px; font-weight:700; vertical-align:middle; margin-left:8px; } .ph-note{ border:1px dashed var(--brass-dim); border-radius:var(--radius-sm); padding:16px 20px; font-size:.85rem; color:var(--text-faint); background:rgba(205,160,107,.05); } .ph-note b{color:var(--brass);} /* ---------- spec table ---------- */ .spec-table{width:100%; border-collapse:collapse;} .spec-table tr{border-bottom:1px solid var(--border-soft);} .spec-table td{padding:16px 4px; font-size:.92rem;} .spec-table td:first-child{color:var(--text-faint); width:38%;} .spec-table td:last-child{color:var(--text);} /* ---------- timeline / steps ---------- */ .steps{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; counter-reset:step;} .step{position:relative; padding-top:8px;} .step .num{ font-family:'Fraunces',serif; font-size:.85rem; color:var(--brass); border:1px solid var(--brass-dim); width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:16px; } /* ---------- quote / cta banner ---------- */ .cta-banner{ border-radius:28px; padding:64px 56px; text-align:center; position:relative; overflow:hidden; /* Theme-aware two-tone panel gradient — was previously a hardcoded near-black end stop (#0a0a0d), which looked fine on the dark theme but faded light-theme text (dark brown on a near-black background) to near-invisible by the bottom of the banner. Using --panel/--bg-alt keeps the same subtle depth effect in both themes since both vars stay within the theme's own light/dark family. */ background:linear-gradient(180deg,var(--panel),var(--bg-alt)); border:1px solid var(--border); } .cta-banner::before{ content:""; position:absolute; inset:-2px; background:var(--grad); opacity:.16; filter:blur(60px); } .cta-banner > *{position:relative;} .cta-banner h2{max-width:640px; margin-left:auto; margin-right:auto;} .cta-banner p{max-width:480px; margin-left:auto; margin-right:auto;} /* ---------- forms ---------- */ .form-panel{ background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:40px; box-shadow:var(--shadow); } .field{margin-bottom:20px;} .field label{display:block; font-size:.8rem; color:var(--text-dim); margin-bottom:8px; font-weight:500;} .field input, .field select, .field textarea{ width:100%; background:var(--bg-alt); border:1px solid var(--border); border-radius:10px; padding:13px 15px; color:var(--text); font-family:'Inter',sans-serif; font-size:.92rem; transition:border-color .2s; } .field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--brass-dim);} .field textarea{resize:vertical; min-height:100px;} .field-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;} .form-note{font-size:.78rem; color:var(--text-faint); margin-top:14px;} .form-success{ display:none; text-align:center; padding:40px 20px; } .form-success.show{display:block;} .form-success .icon-ok{ width:56px; height:56px; border-radius:50%; background:var(--grad); margin:0 auto 18px; display:flex; align-items:center; justify-content:center; font-size:1.4rem; color:#08080a; font-weight:700; } /* ---------- footer ---------- */ footer.site-footer{ border-top:1px solid var(--border-soft); padding:64px 0 32px; background:var(--bg-alt); } .footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; margin-bottom:48px;} .footer-brand .brand{margin-bottom:14px;} .footer-brand p{font-size:.88rem; max-width:280px;} .footer-col h4{font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color:var(--brass); margin-bottom:16px; font-family:'Inter',sans-serif; font-weight:700;} .footer-col a{display:block; font-size:.88rem; color:var(--text-dim); margin-bottom:11px;} .footer-col a:hover{color:var(--text);} .footer-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; padding-top:28px; border-top:1px solid var(--border-soft); font-size:.78rem; color:var(--text-faint); } .footer-bottom .socials{display:flex; gap:16px;} /* ---------- reveal on scroll ---------- */ .reveal{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease;} .reveal.in{opacity:1; transform:translateY(0);} /* ---------- page hero (inner pages) ---------- */ .page-hero{padding:64px 0 40px; text-align:center;} .page-hero .eyebrow{justify-content:center;} .page-hero p.lead{max-width:640px; margin:0 auto; font-size:1.06rem;} .divider{height:1px; background:var(--border-soft); margin:0;} /* ---------- responsive ---------- */ @media (max-width: 980px){ .hero-grid{grid-template-columns:1fr; text-align:left;} .phone-stage{margin-top:20px;} .split{grid-template-columns:1fr;} .split.reverse .split-media{order:0;} .grid-3, .grid-4, .grid-5{grid-template-columns:repeat(2,1fr);} .showcase-strip{grid-template-columns:repeat(2,1fr);} .stat-strip{grid-template-columns:repeat(2,1fr);} .steps{grid-template-columns:repeat(2,1fr);} .footer-grid{grid-template-columns:1fr 1fr;} .nav-links{display:none;} .nav-burger{display:flex;} } @media (max-width: 620px){ .grid-2, .grid-3, .grid-4, .grid-5{grid-template-columns:1fr;} .showcase-strip{grid-template-columns:1fr;} .stat-strip{grid-template-columns:1fr 1fr;} .steps{grid-template-columns:1fr;} .footer-grid{grid-template-columns:1fr;} .field-row{grid-template-columns:1fr;} .section{padding:72px 0;} .cta-banner{padding:44px 24px;} .trust-bar .row{justify-content:flex-start;} }