/* ========================================================================== Spleetz — tokens.css (shared design system for all templates T1–T6) Brand: Ocean Voyage · spec §5. Serve self-hosted fonts in production: DM Sans (400/500/700) + DM Serif Display (400) via @font-face below. Comps load Google Fonts with a DEV-ONLY link in each page ; Claude Code: replace with the /fonts woff2 files, font-display: swap. ========================================================================== */ /* ---- Production @font-face (uncomment when /fonts files are in place) @font-face { font-family:'DM Sans'; src:url('/fonts/DMSans-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; } @font-face { font-family:'DM Sans'; src:url('/fonts/DMSans-Medium.woff2') format('woff2'); font-weight:500; font-display:swap; } @font-face { font-family:'DM Sans'; src:url('/fonts/DMSans-Bold.woff2') format('woff2'); font-weight:700; font-display:swap; } @font-face { font-family:'DM Serif Display'; src:url('/fonts/DMSerifDisplay-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; } ---- */ :root { --navy:#0B1D3A; --teal:#0EA5A0; --mint:#06D6A0; --coral:#FF6B6B; --amber:#F5A623; --sand:#F8F7F4; --ink:#0B1D3A; --ink-soft:#3B4A63; --ink-muted:#7A8AA5; --navy-2:#102849; --line:#E5E2DA; --white:#FFFFFF; --serif:'DM Serif Display', Georgia, serif; --sans:'DM Sans', -apple-system, 'Segoe UI', Arial, sans-serif; --radius:16px; --radius-lg:24px; --maxw:1140px; --shadow:0 2px 14px rgba(11,29,58,0.07); } *, *::before, *::after { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; font-family:var(--sans); color:var(--ink); background:var(--sand); font-size:17px; line-height:1.6; text-wrap:pretty; } img { max-width:100%; display:block; } a { color:var(--teal); text-decoration:none; } a:hover { color:var(--navy); } h1,h2,h3 { font-family:var(--serif); font-weight:400; line-height:1.12; margin:0; color:var(--ink); text-wrap:balance; } h1 { font-size:clamp(38px,5.4vw,62px); } h2 { font-size:clamp(30px,3.6vw,42px); } h3 { font-size:24px; } p { margin:0; } /* ---- Layout ---- */ .wrap { max-width:var(--maxw); margin:0 auto; padding:0 24px; } .section { padding:88px 0; } .section--tight { padding:56px 0; } .band { background:var(--navy); color:var(--sand); } .band h1,.band h2,.band h3 { color:var(--sand); } .band p { color:#B8C4D4; } .eyebrow { font-size:13px; font-weight:700; letter-spacing:0.22em; text-transform:uppercase; color:var(--teal); margin-bottom:14px; } .lede { font-size:20px; color:var(--ink-soft); max-width:640px; } /* ---- Tri-segment stripe motif (the logo as an accent device) ---- */ .stripe { display:flex; height:6px; border-radius:4px; overflow:hidden; gap:3px; width:120px; } .stripe > i { flex:1; } .stripe > i:nth-child(1){ background:var(--teal);} .stripe > i:nth-child(2){ background:var(--mint);} .stripe > i:nth-child(3){ background:var(--amber);} .stripe--full { width:100%; border-radius:0; height:6px; gap:0; } /* ---- Buttons ---- */ .btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; font-family:var(--sans); font-weight:700; font-size:16px; padding:15px 30px; border-radius:100px; border:none; cursor:pointer; transition:transform .12s ease, box-shadow .12s ease; } .btn:hover { transform:translateY(-1px); } .btn--primary { background:var(--teal); color:#fff; box-shadow:0 4px 16px rgba(14,165,160,0.32); } .btn--primary:hover { color:#fff; } .btn--ghost { background:transparent; color:var(--sand); border:2px solid rgba(248,247,244,0.35); } .btn--ghost:hover { color:#fff; border-color:rgba(248,247,244,0.7); } .btn--navy { background:var(--navy); color:#fff; } .btn--navy:hover { color:#fff; } /* ---- Header ---- */ .site-header { background:var(--white); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50; } .site-header .wrap { display:flex; align-items:center; justify-content:space-between; height:76px; } .logo img { height:40px; width:auto; } .site-nav { display:flex; align-items:center; gap:34px; } .site-nav > a.btn { margin-left:6px; } .site-nav a { font-weight:500; font-size:15.5px; color:var(--ink-soft); } .site-nav a:hover, .site-nav a[aria-current="page"] { color:var(--ink); } .nav-toggle { display:none; background:none; border:none; font-size:26px; color:var(--navy); cursor:pointer; } /* Selected / current page indicator: teal underline under the active top-level item. */ .site-nav > a:not(.btn), .nav-drop { position:relative; } .site-nav > a[aria-current="page"]:not(.btn) { font-weight:600; color:var(--ink); } .site-nav > a[aria-current="page"]:not(.btn)::after, .nav-drop[data-current]::after { content:''; position:absolute; left:0; bottom:-10px; height:2.5px; border-radius:2px; background:var(--teal); } .site-nav > a[aria-current="page"]:not(.btn)::after { right:0; } .nav-drop[data-current] > button { font-weight:600; } .nav-drop[data-current]::after { left:0; right:18px; } /* ---- Nav dropdown (Who it's for) ---- */ .nav-drop { position:relative; } .nav-drop > button { font-family:var(--sans); font-weight:500; font-size:15.5px; color:var(--ink-soft); background:none; border:none; cursor:pointer; display:flex; align-items:center; gap:7px; padding:0; } .nav-drop > button::after { content:''; width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg) translateY(-2px); } .nav-drop:hover > button, .nav-drop > button:focus, .nav-drop[data-current] > button { color:var(--ink); } .drop-menu { position:absolute; top:calc(100% + 16px); left:-16px; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 14px 36px rgba(11,29,58,0.14); padding:10px; display:none; flex-direction:column; gap:2px; min-width:240px; } .drop-menu::before { content:''; position:absolute; top:-16px; left:0; right:0; height:16px; } .nav-drop:hover .drop-menu, .nav-drop:focus-within .drop-menu { display:flex; } .drop-menu a { padding:11px 14px; border-radius:10px; font-weight:500; font-size:15.5px; color:var(--ink-soft); } .drop-menu a:hover, .drop-menu a[aria-current="page"] { background:var(--sand); color:var(--ink); } .drop-menu a span { display:block; font-size:12.5px; font-weight:400; color:var(--ink-muted); } /* ---- Cards ---- */ .card { background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow); padding:32px; } .card--top-teal { border-top:5px solid var(--teal); } .card--top-amber { border-top:5px solid var(--amber); } .grid { display:grid; gap:24px; } .grid--2 { grid-template-columns:repeat(2,1fr); } .grid--4 { grid-template-columns:repeat(4,1fr); } .tag { display:inline-block; font-size:12.5px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; padding:5px 14px; border-radius:100px; } .tag--teal { background:rgba(14,165,160,0.12); color:#0B7975; } .tag--amber { background:rgba(245,166,35,0.16); color:#8A5A05; } .tag--mint { background:rgba(6,214,160,0.14); color:#046B50; } /* ---- Steps (navy band) ---- */ .steps { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; } .step-num { font-family:var(--serif); font-size:52px; color:var(--mint); line-height:1; } .step h3 { margin:12px 0 8px; } /* ---- Fanned cards illustration (pure CSS) ---- */ .fanned { position:relative; width:340px; height:300px; } .fanned > div { position:absolute; width:150px; height:216px; border-radius:26px; box-shadow:0 14px 40px rgba(0,0,0,0.32); display:flex; justify-content:center; padding-top:26px; } .fanned > div > i { width:28px; height:28px; border-radius:50%; background:#fff; } .fanned .f1 { background:var(--teal); left:0; top:36px; transform:rotate(-13deg); } .fanned .f2 { background:var(--mint); left:95px; top:16px; transform:rotate(-2deg); } .fanned .f3 { background:var(--amber); left:190px; top:30px; transform:rotate(9deg); } /* ---- Footer ---- */ .site-footer { background:var(--navy); color:#B8C4D4; padding:64px 0 40px; } .site-footer .cols { display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; } .site-footer img { height:38px; width:auto; } .site-footer nav { display:flex; flex-direction:column; gap:10px; } .site-footer a { color:#B8C4D4; font-size:15px; } .site-footer a:hover { color:var(--sand); } .site-footer .legal { border-top:1px solid rgba(184,196,212,0.18); margin-top:44px; padding-top:24px; font-size:13.5px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; } /* ---- Forms (T5) ---- */ .field { display:flex; flex-direction:column; gap:7px; } .field label { font-weight:700; font-size:14.5px; } .field input, .field select, .field textarea { font-family:var(--sans); font-size:16px; color:var(--ink); background:#fff; border:1.5px solid var(--line); border-radius:12px; padding:13px 16px; } .field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(14,165,160,0.15); } .hp { position:absolute; left:-9999px; } /* ---- CTA banner ---- */ .cta-banner { border-radius:var(--radius-lg); background:var(--navy); color:var(--sand); padding:56px; display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; } .cta-banner h2, .cta-banner h3 { color:var(--sand); } .cta-banner p { color:#B8C4D4; } /* ---- Motion & pizzazz ---- */ .rv { opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; } .rv-in { opacity:1; transform:none; } @keyframes rise { from { opacity:0; transform:translateY(26px); } to { opacity:1; transform:none; } } .band h1 { animation:rise .7s .08s ease-out both; } .band { position:relative; overflow:hidden; } .band::before { content:''; position:absolute; width:680px; height:680px; border-radius:50%; background:radial-gradient(circle, rgba(14,165,160,0.16), transparent 65%); top:-220px; right:-160px; pointer-events:none; } .card { transition:transform .18s ease, box-shadow .18s ease; } .card:hover { transform:translateY(-4px); box-shadow:0 12px 32px rgba(11,29,58,0.13); } @keyframes bob1 { 0%,100% { transform:rotate(-13deg) translateY(0); } 50% { transform:rotate(-13deg) translateY(-12px); } } @keyframes bob2 { 0%,100% { transform:rotate(-2deg) translateY(0); } 50% { transform:rotate(-2deg) translateY(-16px); } } @keyframes bob3 { 0%,100% { transform:rotate(9deg) translateY(0); } 50% { transform:rotate(9deg) translateY(-10px); } } .fanned .f1 { animation:bob1 5.2s ease-in-out infinite; } .fanned .f2 { animation:bob2 5.2s ease-in-out .5s infinite; } .fanned .f3 { animation:bob3 5.2s ease-in-out 1s infinite; } @media (prefers-reduced-motion: reduce) { .band h1, .fanned .f1, .fanned .f2, .fanned .f3 { animation:none; } .rv { opacity:1; transform:none; } } /* ---- Video embed (T3) ---- */ .video-frame { position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:0 24px 64px rgba(11,29,58,0.25); background:var(--navy); } .video-frame video { display:block; width:100%; aspect-ratio:16/9; } /* ---- Responsive ---- */ @media (max-width: 900px) { .grid--4 { grid-template-columns:repeat(2,1fr); } .steps { grid-template-columns:1fr; } .section { padding:64px 0; } } /* ---- Articles (News / Case Studies) ---- */ .article-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:26px; } .article-card { display:flex; flex-direction:column; background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; text-decoration:none; color:var(--ink); transition:transform .15s ease, box-shadow .15s ease; } .article-card:hover { transform:translateY(-3px); box-shadow:0 18px 40px rgba(11,29,58,0.14); text-decoration:none; } .article-card__img { display:block; aspect-ratio:16/10; background-size:cover; background-position:center; background-color:var(--sand); } .article-card__body { display:flex; flex-direction:column; gap:12px; padding:24px; flex:1; } .article-card__meta { display:flex; align-items:center; gap:12px; } .article-card__meta time { color:var(--ink-muted); font-size:13.5px; } .article-card__title { font-family:var(--serif, inherit); font-weight:700; font-size:20px; line-height:1.25; } .article-card__summary { color:var(--ink-soft); font-size:15px; line-height:1.55; } .article-card__stat { font-weight:800; font-size:26px; color:var(--teal); line-height:1.1; } .article-card__stat em { display:block; font-style:normal; font-weight:500; font-size:14.5px; color:var(--ink-soft); } .article-card__more { margin-top:auto; color:var(--teal); font-weight:700; font-size:14.5px; } .pill { display:inline-block; padding:4px 11px; border-radius:999px; background:var(--sand); color:var(--navy); font-size:12.5px; font-weight:700; letter-spacing:.02em; } .pill--light { background:rgba(255,255,255,0.14); color:#fff; } .scheduler-embed iframe { width:100%; border:0; min-height:640px; } .list-controls { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px; flex-wrap:wrap; } .list-controls__right { display:flex; align-items:center; gap:12px; } .list-controls__label { font-size:13.5px; color:var(--ink-muted); font-weight:600; } .chips { display:flex; flex-wrap:wrap; gap:8px; } .chip { border:1px solid var(--line); background:var(--white); color:var(--ink-soft); font:inherit; font-size:14px; font-weight:600; padding:7px 14px; border-radius:999px; cursor:pointer; transition:border-color .15s ease, background .15s ease, color .15s ease; } .chip:hover { border-color:var(--teal); color:var(--navy); } .chip.is-active { background:var(--navy); border-color:var(--navy); color:#fff; } .rss-link { font-size:14px; font-weight:600; color:var(--ink-muted); } .rss-link:hover { color:var(--teal); } .article-nav { max-width:820px; display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:10px auto 0; } .article-nav__link { display:flex; flex-direction:column; gap:4px; padding:18px 22px; background:var(--white); border:1px solid var(--line); border-radius:14px; text-decoration:none; color:var(--ink); } .article-nav__link:hover { border-color:var(--teal); text-decoration:none; } .article-nav__link span { font-size:13px; font-weight:700; color:var(--teal); } .article-nav__link strong { font-weight:600; font-size:15.5px; line-height:1.3; } .article-nav__link--next { text-align:right; align-items:flex-end; } @media (max-width: 620px) { .list-controls { flex-direction:column; align-items:flex-start; } .article-nav { grid-template-columns:1fr; } } .seg { display:inline-flex; background:var(--sand); border:1px solid var(--line); border-radius:999px; padding:3px; } .seg button { border:0; background:transparent; cursor:pointer; font:inherit; font-size:14px; font-weight:600; color:var(--ink-soft); padding:7px 16px; border-radius:999px; transition:background .15s ease, color .15s ease; } .seg button.is-active { background:var(--white); color:var(--navy); box-shadow:0 1px 3px rgba(11,29,58,0.12); } @media (max-width: 900px) { .article-grid { grid-template-columns:repeat(2, 1fr); } } @media (max-width: 620px) { .article-grid { grid-template-columns:1fr; } } /* Per-block visibility (Block Settings panel). */ @media (max-width: 720px) { .u-hide-mobile { display:none !important; } } @media (min-width: 721px) { .u-hide-desktop { display:none !important; } } @media (max-width: 720px) { .grid--2 { grid-template-columns:1fr; } .site-nav { display:none; position:absolute; top:76px; left:0; right:0; background:#fff; flex-direction:column; align-items:flex-start; padding:20px 24px 26px; gap:18px; border-bottom:1px solid var(--line); } .site-nav.open { display:flex; } .nav-toggle { display:block; } .nav-drop .drop-menu { position:static; display:flex; box-shadow:none; border:none; padding:2px 0 0 14px; min-width:0; } .nav-drop > button { pointer-events:none; } .cta-banner { padding:36px 28px; } .fanned { transform:scale(0.8); transform-origin:top left; } }