/* * XennialAI – landingsside 2026 * Designretning C: kald nøytral base, én varm koralaksent. * Egen stil for xennialai.no. Resten av stacken bruker Clean Contrast. * * Fonter (legg i FØR denne filen): * */ /* ============================================================ VARIABLER ============================================================ */ :root{ /* Farger */ --bg: #FBFBFD; --surface: #F4F5F8; --line: #E4E6EC; --line-soft: #EDEFF4; --text: #0F1115; --muted: #5C6270; --hint: #9AA0AE; --accent: #E8563F; --accent-soft: #FDEDEA; --white: #FFFFFF; /* Radius – nøstet: indre = ytre − mellomrom */ --r-sm: 8px; --r-md: 12px; --r-lg: 20px; --r-full:999px; /* Skygge – blur er alltid 2× avstand */ --shadow-sm: 0 1px 2px rgba(15,17,21,.05); --shadow-md: 0 8px 16px rgba(15,17,21,.07); --shadow-lg: 0 20px 40px rgba(15,17,21,.10); --shadow-accent: 0 8px 16px rgba(232,86,63,.22); /* Typografi */ --font-display:'Inter Tight',system-ui,-apple-system,sans-serif; --font-body: 'Inter',system-ui,-apple-system,sans-serif; --font-mono: 'JetBrains Mono',ui-monospace,monospace; /* Rytme */ --gap: 40px; --section: clamp(64px,8vw,112px); } /* ============================================================ RESET OG BASE ============================================================ */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} [hidden]{display:none!important} html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth} body{ font-family:var(--font-body); background:var(--bg); color:var(--text); font-size:1.0625rem; line-height:1.6; } img,svg{max-width:100%;display:block} a{color:inherit} :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px} .wrap{max-width:1200px;margin:0 auto;padding:0 var(--gap)} .section{padding:var(--section) 0} .section--surface{background:var(--surface);border-block:1px solid var(--line-soft)} .skip{ position:absolute;left:-9999px;top:8px; background:var(--text);color:var(--white); padding:10px 20px;border-radius:var(--r-sm);z-index:100; } .skip:focus{left:var(--gap)} /* ============================================================ TYPOGRAFI ============================================================ */ h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:-.035em;line-height:1.1} h1{font-size:clamp(2.5rem,4.6vw,3.875rem);font-weight:700;letter-spacing:-.04em;line-height:1.04} h2{font-size:clamp(1.875rem,3.2vw,2.625rem);font-weight:700} h3{font-size:1.1875rem;font-weight:600;letter-spacing:-.02em} h4{font-size:1rem;font-weight:600;letter-spacing:-.015em} p{max-width:34rem} .lead{color:var(--muted);font-size:1.0625rem} .lead--lg{font-size:1.125rem} .muted{color:var(--muted)} .accent{color:var(--accent)} .eyebrow{ font-family:var(--font-mono); font-size:.75rem;letter-spacing:.09em;text-transform:uppercase; color:var(--hint); } /* ============================================================ NAVIGASJON ============================================================ */ .nav{ position:sticky;top:0;z-index:30; background:rgba(251,251,253,.85); backdrop-filter:blur(12px); border-bottom:1px solid var(--line-soft); } .nav-inner{display:flex;align-items:center;justify-content:space-between;height:72px} .logo{ font-family:var(--font-display);font-weight:700;font-size:1.1875rem; letter-spacing:-.035em;text-decoration:none; } .logo span{color:var(--accent)} .nav-links{display:flex;align-items:center;gap:30px;list-style:none} .nav-links a{ font-size:.9375rem;font-weight:500;color:var(--muted); text-decoration:none;transition:color .15s; } .nav-links a:hover,.nav-links a[aria-current]{color:var(--text)} .nav-toggle{ display:none;width:42px;height:42px; background:var(--white);border:1px solid var(--line); border-radius:var(--r-sm);cursor:pointer; align-items:center;justify-content:center;gap:4px;flex-direction:column; } .nav-toggle i{display:block;width:16px;height:1.5px;background:var(--text)} /* ============================================================ KNAPPER ============================================================ */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; font-family:var(--font-body);font-size:1rem;font-weight:500; padding:14px 28px; /* horisontal = 2× vertikal */ border-radius:var(--r-full); border:1px solid transparent;cursor:pointer;text-decoration:none; transition:transform .12s,opacity .15s,border-color .15s; } .btn:active{transform:translateY(1px)} .btn--primary{background:var(--accent);color:var(--white);box-shadow:var(--shadow-accent)} .btn--primary:hover{opacity:.92} .btn--ghost{background:var(--white);color:var(--text);border-color:var(--line);box-shadow:var(--shadow-sm)} .btn--ghost:hover{border-color:#CFD3DC} .btn--dark{background:var(--text);color:var(--white);box-shadow:0 8px 16px rgba(15,17,21,.14)} .btn--dark:hover{opacity:.9} .btn--sm{font-size:.9375rem;padding:9px 18px} .btn--block{width:100%} .actions{display:flex;gap:12px;flex-wrap:wrap} .link-arrow{ display:inline-flex;align-items:center;gap:6px; font-size:.9375rem;font-weight:500;color:var(--accent); text-decoration:none; } .link-arrow:hover{gap:10px} .link-arrow::after{content:'→';transition:none} /* ============================================================ PILLE ============================================================ */ .pill{ display:inline-flex;align-items:center;gap:9px; font-family:var(--font-mono);font-size:.75rem;letter-spacing:.02em; padding:7px 15px;border-radius:var(--r-full); background:var(--white);border:1px solid var(--line);color:var(--muted); box-shadow:var(--shadow-sm); } .pill i{width:7px;height:7px;border-radius:50%;background:var(--accent);display:block;flex:none} /* ============================================================ HERO (todelt) ============================================================ */ .hero{position:relative;overflow:hidden} .hero::before{ content:'';position:absolute;top:-240px;right:-180px; width:820px;height:820px;pointer-events:none; background:radial-gradient(circle,rgba(232,86,63,.08),transparent 62%); } .hero-grid{ position:relative; display:grid;grid-template-columns:1.05fr .95fr; gap:72px;align-items:center; padding:88px 0 104px; } .hero .pill{margin-bottom:26px} .hero .lead{max-width:31rem;margin-top:24px} .hero .actions{margin-top:34px} .meta{ display:flex;gap:34px;flex-wrap:wrap; margin-top:44px;padding-top:26px; border-top:1px solid var(--line-soft); } .meta-v{font-family:var(--font-display);font-size:1.375rem;font-weight:700;letter-spacing:-.035em} .meta-l{font-size:.875rem;color:var(--muted);margin-top:2px} /* ============================================================ SKJERMBILDERAMME Rammen rundt produktbildene. De øvrige .ph-*-reglene under er skjelett-flater som fortsatt brukes på undersidene der bilde ikke er lagt inn ennå. ============================================================ */ .ph{ position:relative;overflow:hidden;margin:0; background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); } .ph img{display:block;width:100%;height:auto} .ph--flat{box-shadow:var(--shadow-sm)} .ph--md{border-radius:var(--r-md)} .ph-bar{ display:flex;align-items:center;gap:8px; padding:12px 16px; border-bottom:1px solid var(--line-soft); background:#FCFCFE; } .ph-bar i{width:9px;height:9px;border-radius:50%;background:#E1E4EB;flex:none} .ph-bar span{ margin-left:10px;height:20px;flex:1;max-width:210px; border-radius:var(--r-full);background:var(--surface); } .ph-body{display:grid;grid-template-columns:150px 1fr;min-height:200px} .ph-body--plain{display:block;padding:20px} .ph-side{ padding:18px 14px;background:#FCFCFE; border-right:1px solid var(--line-soft); display:grid;gap:10px;align-content:start; } .ph-main{padding:20px;display:grid;gap:12px;align-content:start} .ph-line{height:10px;border-radius:var(--r-full);background:var(--surface)} .ph-line--accent{background:var(--accent-soft)} .ph-blocks{display:grid;grid-template-columns:repeat(4,1fr);gap:10px} .ph-block{height:56px;border-radius:var(--r-md);background:var(--surface)} .ph-block--accent{background:var(--accent-soft)} .ph-chart{ display:flex;align-items:flex-end;gap:7px;height:96px; padding:14px;border-radius:var(--r-md);background:var(--surface); } .ph-chart i{flex:1;border-radius:3px 3px 0 0;background:#DDE0E7;display:block} .ph-chart i.on{background:#C9CDD8} .ph-note{ position:absolute;right:12px;bottom:10px; font-family:var(--font-mono);font-size:.625rem;letter-spacing:.06em; text-transform:uppercase;color:#B8BEC9; } .ph--portrait{aspect-ratio:4/5;background:var(--surface);display:grid;place-items:center} .ph--portrait .ph-avatar{width:96px;height:96px;border-radius:50%;background:#E6E9EF} /* Kortklynge i hero */ .cluster{display:grid;gap:20px} @media (min-width:900px){ .cluster{position:relative;min-height:440px} .cluster .ph{position:absolute} .cluster .ph:nth-child(1){top:0;left:0;width:100%} .cluster .ph:nth-child(2){top:222px;left:-46px;width:290px;z-index:2} .cluster .ph:nth-child(3){top:316px;right:-30px;width:262px} } /* ============================================================ KORT ============================================================ */ .cards{display:grid;gap:20px} .cards--3{grid-template-columns:repeat(3,1fr)} .cards--2{grid-template-columns:repeat(2,1fr)} .card{ background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px; /* ytre padding > indre elementer */ display:flex;flex-direction:column;gap:10px; } .card--surface{background:var(--surface);border-color:transparent} .card p{font-size:.9375rem;color:var(--muted);max-width:none} .card-n{font-family:var(--font-mono);font-size:.75rem;color:var(--accent)} .card .link-arrow{margin-top:auto;padding-top:12px} .project{ background:var(--white);border:1px solid var(--line); border-radius:var(--r-lg);overflow:hidden; display:flex;flex-direction:column; } .project .ph{border:none;border-radius:0;box-shadow:none;border-bottom:1px solid var(--line-soft)} .project-body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:8px} /* Utvalgt prosjekt: fyller begge kolonnene, med bildet ved siden av teksten. */ .project--wide{grid-column:1/-1} @media (min-width:900px){ .project--wide{display:grid;grid-template-columns:1.2fr .8fr} .project--wide .ph{border-bottom:none;border-right:1px solid var(--line-soft)} .project--wide .project-body{justify-content:center;padding:34px 36px} } .tag{ align-self:flex-start; font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.04em; color:var(--accent);background:var(--accent-soft); padding:4px 10px;border-radius:var(--r-full); } .tag--grey{color:var(--muted);background:var(--surface)} /* ============================================================ SEKSJONSHODE ============================================================ */ .head{ display:flex;align-items:end;justify-content:space-between; gap:40px;margin-bottom:40px; } .head h2{max-width:18ch} .head .lead{max-width:26rem} /* ============================================================ STEG ============================================================ */ .steps{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)} .step{padding:26px 30px 30px;border-right:1px solid var(--line-soft)} .step:last-child{border-right:none} .step p{font-size:.9375rem;color:var(--muted);margin-top:6px;max-width:none} /* ============================================================ CTA-BANNER ============================================================ */ .cta{ background:var(--text);color:var(--white); border-radius:var(--r-lg); padding:clamp(40px,6vw,64px); display:grid;gap:26px;justify-items:start; } .cta h2{color:var(--white)} .cta p{color:#A8AEBB;max-width:32rem} /* ============================================================ SKJEMA ============================================================ */ .form{display:grid;gap:18px} .field{display:grid;gap:7px} .field label{font-size:.875rem;font-weight:500} .input,.textarea{ width:100%;font-family:var(--font-body);font-size:1rem; padding:13px 16px; border:1px solid var(--line);border-radius:var(--r-md); background:var(--white);color:var(--text); outline:none;transition:border-color .15s; } .input:focus,.textarea:focus{border-color:var(--accent)} .textarea{min-height:150px;resize:vertical;line-height:1.6} .hint{font-size:.8125rem;color:var(--muted)} .msg{ display:none;font-size:.9375rem; padding:12px 16px;border-radius:var(--r-md); } .msg.show{display:block} .msg.error{background:#FEF2F2;color:#B4271A} .msg.success{background:#ECFDF5;color:#15803D} /* ============================================================ FOOTER ============================================================ */ .footer{border-top:1px solid var(--line-soft);padding:56px 0 40px;background:var(--bg)} .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px} .footer h4{margin-bottom:14px} .footer ul{list-style:none;display:grid;gap:9px} .footer a{font-size:.9375rem;color:var(--muted);text-decoration:none} .footer a:hover{color:var(--text)} .footer-bottom{ display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap; margin-top:44px;padding-top:22px;border-top:1px solid var(--line-soft); font-size:.875rem;color:var(--hint); } /* ============================================================ RESPONSIV ============================================================ */ @media (max-width:900px){ :root{--gap:24px} .nav-toggle{display:flex} .nav-links{ display:none;position:absolute;top:72px;left:0;right:0; flex-direction:column;align-items:stretch;gap:0; background:var(--bg);border-bottom:1px solid var(--line); padding:8px var(--gap) 20px; } .nav-links.open{display:flex} .nav-links li{padding:10px 0} .hero-grid{grid-template-columns:1fr;gap:48px;padding:56px 0 72px} .cards--3,.cards--2,.steps,.footer-grid{grid-template-columns:1fr} .steps{border-top:none} .step{border-right:none;border-top:1px solid var(--line-soft);padding:22px 0 24px} .head{flex-direction:column;align-items:start;gap:16px} .ph-body{grid-template-columns:1fr} .ph-side{display:none} .ph-blocks{grid-template-columns:repeat(2,1fr)} } /* ============================================================ PRINT ============================================================ */ @media print{ .nav,.footer,.cta,.ph,.no-print{display:none!important} body{background:#fff;color:#000} .section{padding:16px 0} }