/* Calidex.ai — marketing site Type: Newsreader (serif display) + Schibsted Grotesk (sans) Palette: near-black ground, warm off-white ink, gold accent. */ /* -------- Self-hosted fonts -------- Subset woff2 lifted from the brand bundle. unicode-range means the browser only downloads a file when the page actually uses a glyph from its range. */ @font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 300 500; font-display: swap; src: url('fonts/newsreader-latin.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 300 500; font-display: swap; src: url('fonts/newsreader-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 300 400; font-display: swap; src: url('fonts/newsreader-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 300 400; font-display: swap; src: url('fonts/newsreader-italic-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/schibsted-grotesk-latin.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/schibsted-grotesk-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } :root { --bg: #121110; --ink: #eae7e1; --muted: #a5a09e; --muted-2: #8b857b; /* labels/eyebrows on dark — raised to clear WCAG AA */ --faint: #a5a096; --soft: #cfcbc4; --gold: #d9a441; --border: #262421; --hair: #3a3733; /* Calidef (deep blue) */ --def-1: #26365e; --def-2: #16223f; --def-3: #0b1226; --def-border: #2c3c66; --def-cta: #d9772e; /* Vesper (light) */ --vsp-bg: #f2f0ec; --vsp-ink: #191817; --vsp-muted: #6d685f; --vsp-label: #6c675f; /* Vesper label on light — darkened to clear WCAG AA */ --vsp-gold: #9c6d15; --vsp-border:#d8d4cc; --maxw: 1140px; --nav-offset: 100px; /* sticky-nav clearance for anchor jumps */ } * { margin: 0; padding: 0; box-sizing: border-box; } /* NB: never put overflow-x on — it forces overflow-y:auto, turning the root into a scroll container, which breaks sticky positioning and the URL-bar scroll on mobile. Horizontal overflow is contained on with clip. */ html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--ink); font-family: 'Schibsted Grotesk', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* Contain the full-bleed elements' horizontal overflow without creating a scroll container: clip (modern) leaves the vertical axis untouched; hidden is the fallback for older engines. */ overflow-x: hidden; overflow-x: clip; } a { color: var(--ink); text-decoration: none; } a:hover { color: var(--gold); } ::selection { background: var(--gold); color: var(--bg); } :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 40px; } /* Type scale — keep sizes on these steps, no in-between/half-pixel values. Text/UI: 10 · 11 · 12 · 13 · 15 · 17 Display: 26 · 28 · 34 · 38 · 44 · 46 (+ clamp() for the hero, quote, email) */ .eyebrow { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2); } .gold { color: var(--gold); } .section-label { margin-bottom: 30px; } /* -------- Nav -------- */ .nav { display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 100; margin: 0 calc(50% - 50vw); padding: 18px calc(50vw - 50%); background: rgba(18, 17, 16, .82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(38, 36, 33, .6); } .brand { font-family: 'Newsreader', serif; font-size: 44px; letter-spacing: .01em; } .brand .dot { color: var(--gold); } .nav-links { display: flex; gap: 28px; font-size: 13px; align-items: center; } .nav-links a { color: var(--faint); } .nav-links a:hover, .nav-links a.active { color: var(--ink); } .nav-cta { color: var(--ink) !important; border-bottom: 1px solid var(--gold); padding-bottom: 2px; } /* Hamburger (mobile only) */ .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 7px; width: 44px; height: 44px; padding: 10px; background: none; border: 0; cursor: pointer; } .nav-toggle span { display: block; height: 1px; background: var(--ink); transition: transform .25s ease; } .nav.open .nav-toggle span:first-child { transform: translateY(4px) rotate(45deg); } .nav.open .nav-toggle span:last-child { transform: translateY(-4px) rotate(-45deg); } /* -------- Hero -------- Height sets how much scrolling the reveal is spread across. Kept short so the headline keeps pace with the scroll — all lines are in within ~half a screen (see the thresholds in main.js), then a brief hold before the next section. */ .hero { height: 160vh; position: relative; } .hero-sticky { position: sticky; top: 0; z-index: 1; min-height: 100vh; min-height: 100svh; /* stable on iOS Safari's collapsing URL bar */ display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; padding: 40px 0; } .hero .eyebrow { margin-bottom: 26px; } .hero-title { font-family: 'Newsreader', serif; font-weight: 300; font-size: clamp(44px, 6.5vw, 76px); line-height: 1.08; letter-spacing: -.015em; max-width: 820px; text-wrap: pretty; } .hero-title span { display: block; } .hero-lede { font-size: 17px; line-height: 1.7; color: var(--muted); max-width: 520px; margin: 32px 0 44px; } .hero-actions { display: flex; gap: 22px; align-items: center; } /* Scroll hint: visible at rest so the scroll-driven hero is discoverable; fades away once the visitor starts scrolling. */ .scroll-hint { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted-2); z-index: 1; transition: opacity .45s ease; } .scroll-hint i { width: 1px; height: 40px; background: linear-gradient(to bottom, var(--gold), transparent); transform-origin: top; animation: hintDrop 2.4s ease-in-out infinite; } @keyframes hintDrop { 0% { transform: scaleY(0); opacity: 0; } 40% { transform: scaleY(1); opacity: 1; } 80% { opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } } html.scrolled .scroll-hint { opacity: 0; } @media (prefers-reduced-motion: reduce) { .scroll-hint i { animation: none; } } /* Ambient background: a faint network of connected nodes (drawn on a canvas by main.js) spanning the whole hero — it fills the empty space below the headline and, on scroll, assembles into the wordmark. Full-bleed; only the very top is faded so it clears the nav. */ .hero-atmos { position: absolute; inset: 0; left: calc(50% - 50vw); width: 100vw; z-index: 0; pointer-events: none; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 7%, #000 94%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 7%, #000 94%, transparent 100%); } .hero-atmos canvas { display: block; width: 100%; height: 100%; } /* Hero text sits above the network. */ .hero .eyebrow, .hero-title, .hero-lede, .hero-actions { position: relative; z-index: 1; } .btn { font-size: 15px; display: inline-block; } .btn-primary { background: var(--ink); color: var(--bg); font-weight: 600; padding: 14px 28px; border-radius: 2px; transition: background .25s, color .25s; } .btn-primary:hover { background: var(--gold); color: var(--bg); } .btn-ghost { color: var(--muted); border-bottom: 1px solid var(--hair); padding-bottom: 3px; transition: color .25s, border-color .25s; } .btn-ghost:hover { color: var(--ink); border-bottom-color: var(--gold); } /* -------- Industries strip -------- */ .industries { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .ind { padding: 26px 28px; display: flex; gap: 12px; align-items: baseline; border-left: 1px solid var(--border); } .ind:first-child { border-left: 0; padding-left: 0; } .ind:last-child { padding-right: 0; } .ind .num { color: var(--gold); font-size: 12px; } .ind .lbl { font-size: 15px; color: var(--soft); } .ind-tag { margin-left: auto; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); white-space: nowrap; } a.ind .lbl, a.ind .ind-tag { transition: color .2s; } a.ind:hover .lbl { color: var(--ink); } a.ind:hover .ind-go { color: var(--gold); } /* -------- Calidef spotlight -------- */ .calidef { padding: 110px 0 0; scroll-margin-top: var(--nav-offset); overflow: hidden; position: relative; } /* The card's blue bleeds softly into the warm black above it, so the section emerges from the page instead of arriving as a detached box. */ .calidef::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 420px; background: radial-gradient(52% 240px at 50% 130px, rgba(38, 54, 94, .30), transparent 72%); pointer-events: none; } .calidef-card { margin: 0 auto; background: linear-gradient(165deg, var(--def-1) 0%, var(--def-2) 45%, var(--def-3) 100%); border: 1px solid var(--def-border); border-radius: 24px; width: min(var(--maxw), calc(100vw - 80px)); will-change: width, border-radius; /* Grounds the card: a deep drop below + a faint blue ambience around it. */ box-shadow: 0 34px 90px rgba(11, 18, 38, .5), 0 0 150px rgba(38, 54, 94, .16); } .calidef-inner { max-width: var(--maxw); margin: 0 auto; padding: 88px 48px 84px; } .calidef-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; } .calidef-logo img { height: 51px; display: block; } .calidef-wordmark { font-family: 'Newsreader', serif; font-size: 34px; color: #fff; letter-spacing: .01em; } .calidef-kicker { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #97a3c0; /* steel blue-grey — reads on the deep-blue card, clears WCAG AA */ } .calidef-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; } .calidef-title { font-family: 'Newsreader', serif; font-weight: 400; font-size: 44px; line-height: 1.12; max-width: 420px; text-wrap: pretty; } .calidef-lede { font-size: 15px; line-height: 1.7; color: var(--muted); margin: 22px 0 30px; max-width: 440px; } .calidef-visit { font-weight: 600; background: linear-gradient(100deg, var(--def-1) 0%, var(--def-cta) 100%); color: #fff; padding: 13px 26px; border-radius: 10px; transition: filter .25s; } .calidef-visit:hover { filter: brightness(1.2); color: #fff; } /* Feature list (shared) */ .feature-list { display: flex; flex-direction: column; } .feature { border-top: 1px solid var(--def-border); padding: 24px 0; display: flex; gap: 20px; } .feature.feature-last { border-bottom: 1px solid var(--def-border); } .feature-num { color: var(--gold); font-size: 13px; padding-top: 2px; } .feature-h { font-size: 15px; font-weight: 600; margin-bottom: 6px; } .feature-p { font-size: 13px; line-height: 1.65; color: var(--muted); } /* -------- Vesper News (light card, expands like Calidef) -------- */ .vesper { padding: 110px 0 0; scroll-margin-top: var(--nav-offset); overflow: hidden; position: relative; } /* The card's light ground bleeds softly into the black above it — the warm counterpart of the Calidef card's blue bridge. */ .vesper::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 420px; background: radial-gradient(52% 240px at 50% 130px, rgba(242, 240, 236, .10), transparent 72%); pointer-events: none; } .vesper-card { margin: 0 auto; background: var(--vsp-bg); color: var(--vsp-ink); border: 1px solid var(--vsp-border); border-radius: 24px; width: min(var(--maxw), calc(100vw - 80px)); will-change: width, border-radius; box-shadow: 0 34px 90px rgba(0, 0, 0, .5), 0 0 150px rgba(242, 240, 236, .06); } .vesper-inner { max-width: var(--maxw); margin: 0 auto; padding: 100px 40px 96px; } .vesper-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 20px; } .vesper-kicker { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--vsp-label); } .vesper-link { font-size: 13px; font-weight: 600; color: var(--vsp-gold); border-bottom: 1px solid var(--vsp-gold); padding-bottom: 2px; } .vesper-link:hover { color: var(--vsp-ink); border-bottom-color: var(--vsp-ink); } .vesper-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; } .vesper-title { font-family: 'Newsreader', serif; font-weight: 400; font-size: 46px; line-height: 1.1; } .vesper-lede { font-size: 15px; line-height: 1.7; color: var(--vsp-muted); margin-top: 22px; max-width: 440px; } .vesper-features .feature { border-top-color: var(--vsp-border); padding: 22px 0; } .vesper-features .feature.feature-last { border-bottom-color: var(--vsp-border); } .vesper-features .feature-num { color: var(--vsp-gold); } .vesper-features .feature-p { color: var(--vsp-muted); } /* -------- Vision -------- */ .vision { padding: 100px 0; border-top: 1px solid var(--border); scroll-margin-top: var(--nav-offset); } .vision-quote { font-family: 'Newsreader', serif; font-weight: 300; font-style: italic; font-size: clamp(28px, 3.6vw, 42px); line-height: 1.3; max-width: 880px; text-wrap: pretty; } .vision-quote span { display: block; } .vision-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 44px; margin-top: 64px; } .vision-h { font-size: 15px; font-weight: 600; margin-bottom: 8px; color: var(--ink); } .vision-p { font-size: 13px; line-height: 1.7; color: var(--muted); } /* -------- About -------- */ .about { padding: 100px 0; border-top: 1px solid var(--border); scroll-margin-top: var(--nav-offset); } .about-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 64px; } .about-lead { font-family: 'Newsreader', serif; font-weight: 300; font-size: 26px; line-height: 1.45; text-wrap: pretty; } .about-p { font-size: 15px; line-height: 1.7; color: var(--muted); margin-top: 26px; max-width: 560px; } /* -------- Contact / footer -------- */ .contact { border-top: 1px solid var(--border); padding: 90px 0 50px; scroll-margin-top: var(--nav-offset); } .contact-mail { font-family: 'Newsreader', serif; font-weight: 300; font-size: clamp(34px, 5vw, 58px); letter-spacing: -.01em; line-height: 1.1; display: inline-block; } .contact-mail:hover { color: var(--gold); } .contact-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 30px; } .contact-copy { font-family: inherit; font-size: 13px; color: var(--muted); background: none; border: 1px solid var(--hair); border-radius: 2px; padding: 9px 16px; cursor: pointer; transition: color .2s, border-color .2s; } .contact-copy:hover { color: var(--ink); border-color: var(--gold); } .contact-copy.copied { color: var(--gold); border-color: var(--gold); } .contact-note { font-size: 13px; color: var(--muted-2); } .foot { display: flex; justify-content: space-between; align-items: baseline; margin-top: 80px; border-top: 1px solid var(--border); padding-top: 26px; font-size: 12px; color: var(--muted-2); } .foot-links { display: flex; gap: 24px; } .foot-links a { color: var(--muted-2); } .foot-links a:hover { color: var(--gold); } /* -------- Motion (JS-driven) initial states -------- */ .js [data-reveal], .js [data-heroline] { opacity: 0; } [data-scrollfade] { transition: opacity .3s ease, transform .3s ease; } /* -------- Responsive -------- */ @media (max-width: 860px) { :root { --nav-offset: 84px; } .brand { font-size: 34px; } /* Collapse nav into a hamburger panel */ .nav-toggle { display: flex; } .nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 4px 40px 14px; font-size: 15px; background: var(--bg); border-bottom: 1px solid rgba(38, 36, 33, .6); } .nav.open .nav-links { display: flex; } .nav-links a { padding: 13px 0; border-bottom: 1px solid rgba(38, 36, 33, .5); } .nav-links a:last-child { border-bottom: 0; } .nav-cta { padding-bottom: 13px; } .calidef-grid, .vesper-grid, .vision-grid, .about-grid { grid-template-columns: 1fr; gap: 40px; } .calidef-inner { padding: 56px 28px 52px; } .calidef-title { font-size: 34px; } .vesper-title { font-size: 36px; } } @media (max-width: 620px) { :root { --nav-offset: 76px; } .wrap { padding: 0 22px; } .brand { font-size: 28px; } .nav-links { padding: 4px 22px 14px; } .vesper-inner { padding: 72px 22px 68px; } .vesper-head { flex-wrap: wrap; gap: 10px; } .industries { grid-template-columns: repeat(2, 1fr); } .ind { padding: 20px 18px; border-left: 1px solid var(--border); flex-wrap: wrap; row-gap: 4px; } .ind-tag { margin-left: 0; flex-basis: 100%; } .ind:nth-child(odd) { border-left: 0; padding-left: 0; } .ind:nth-child(n+3) { border-top: 1px solid var(--border); } .calidef-card, .vesper-card { width: min(var(--maxw), calc(100vw - 44px)); } .calidef-inner { padding: 48px 22px 44px; } .calidef-logo img { height: 40px; } .hero-actions { flex-wrap: wrap; gap: 16px; } .foot { flex-direction: column; gap: 18px; } } /* -------- 404 page -------- */ .nf { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px; } .nf .brand { font-size: 34px; margin-bottom: 46px; } .nf .code { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: 20px; } .nf h1 { font-family: 'Newsreader', serif; font-weight: 300; font-size: clamp(30px, 5vw, 52px); letter-spacing: -.01em; line-height: 1.1; margin: 0; } .nf p { color: var(--muted); font-size: 15px; line-height: 1.6; margin: 20px 0 36px; max-width: 420px; } /* Respect reduced-motion: reveal everything, no transforms */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js [data-reveal], .js [data-heroline], [data-scrollfade] { opacity: 1 !important; transform: none !important; } }