/* ========================================================= FIRMANAVN — fælles stylesheet Ét skelet, fire temaer. Skift tema med Temaer: (intet) = neutral paraply · hive · horse · cool · grow ========================================================= */ /* ---- Fonts ---- */ @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@600;700;800&family=Inter:wght@400;500;600&display=swap'); /* ---- Theme tokens ---- */ :root { --bg: #f5f7f9; --surface: #ffffff; --ink: #16202b; --muted: #5b6b76; --border: #dde3e8; --accent: #137b8f; --accent-ink: #ffffff; --accent-soft: #e8f1f3; --maxw: 1080px; --radius: 4px; --font-display: 'Plus Jakarta Sans', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; } [data-theme="hive"] { --bg: #f7f3ec; --surface: #fffdf9; --ink: #23201a; --muted: #6f6757; --border: #e6ddcb; --accent: #bf8417; --accent-soft: #f4e9d1; } [data-theme="horse"] { --bg: #efeae3; --surface: #fdfbf8; --ink: #2c2418; --muted: #6f6354; --border: #e3dac9; --accent: #8a5a2b; --accent-soft: #f1e7d8; } [data-theme="cool"] { --bg: #eef2f6; --surface: #ffffff; --ink: #16222e; --muted: #56697a; --border: #d6e0e8; --accent: #2563a8; --accent-soft: #e4eef7; } [data-theme="grow"] { --bg: #edf3ec; --surface: #ffffff; --ink: #1b2a1b; --muted: #566655; --border: #d5e2d2; --accent: #3c7a3a; --accent-soft: #e6f0e3; } /* ---- Reset / base ---- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); color: var(--ink); background: var(--bg); line-height: 1.55; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } h1, h2, h3 { font-family: var(--font-display); margin: 0; line-height: 1.1; letter-spacing: -0.01em; } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } /* ---- Buttons ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-body); font-weight: 600; font-size: 14px; padding: 12px 22px; border-radius: var(--radius); border: 1px solid transparent; cursor: pointer; transition: transform .12s ease, background .15s ease; } .btn--primary { background: var(--accent); color: var(--accent-ink); } .btn--primary:hover { transform: translateY(-1px); } .btn--dark { background: var(--ink); color: #fff; } .btn--ghost { background: var(--surface); color: var(--ink); border-color: var(--border); } .btn--ghost:hover { border-color: var(--accent); } .btn--sm { padding: 8px 16px; font-size: 13px; } /* ---- Eyebrow / labels ---- */ .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; } .eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--accent); } /* ---- Top nav ---- */ .site-nav { border-bottom: 1px solid var(--border); background: var(--surface); } .site-nav .wrap { display: flex; align-items: center; gap: 28px; height: 66px; } .brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; letter-spacing: .04em; } .brand .mark { width: 14px; height: 14px; border-radius: 3px; background: var(--accent); } .nav-links { display: flex; gap: 22px; margin-left: auto; } .nav-links a { font-size: 13.5px; color: var(--muted); } .nav-links a:hover { color: var(--ink); } /* ---- Breadcrumb ---- */ .crumb { font-size: 12px; color: var(--muted); padding: 16px 0 0; } .crumb b { color: var(--ink); font-weight: 600; } /* ---- Hero ---- */ .hero .wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; padding-top: 56px; padding-bottom: 56px; } .hero h1 { font-size: clamp(34px, 5vw, 52px); font-weight: 700; } .hero .lede { color: var(--muted); font-size: 16px; margin: 18px 0 26px; max-width: 46ch; } .hero .price { font-family: var(--font-display); font-size: 24px; font-weight: 700; margin: 0 0 16px; } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; } .hero-media { background: var(--accent-soft); border: 1px solid var(--border); border-radius: var(--radius); aspect-ratio: 4 / 3; display: grid; place-items: center; gap: 10px; color: var(--muted); } .hero-media .cap { font-size: 12px; } /* ---- Section block ---- */ .block { padding: 56px 0; } .block + .block { border-top: 1px solid var(--border); } .block h2 { font-size: clamp(22px, 3vw, 28px); font-weight: 700; } .block .sub { color: var(--muted); margin-top: 8px; max-width: 60ch; } /* ---- Front page: choose grid ---- */ .choose { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 30px; } .choose-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); border-top: 3px solid var(--card-accent, var(--accent)); padding: 26px 22px; display: flex; flex-direction: column; gap: 4px; transition: transform .14s ease, box-shadow .14s ease; } .choose-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -18px rgba(20,32,43,.4); } .choose-card .icon { color: var(--card-accent, var(--accent)); margin-bottom: 14px; } .choose-card h3 { font-size: 18px; } .choose-card .branch { font-size: 12.5px; color: var(--muted); } .choose-card .more { margin-top: auto; padding-top: 18px; font-size: 13px; font-weight: 600; color: var(--card-accent, var(--accent)); display: inline-flex; align-items: center; gap: 6px; } /* ---- Catalog: category + product grid ---- */ .cat + .cat { margin-top: 8px; } .cat-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 20px; } .cat-head h2 { font-size: 19px; } .cat-head .sub { color: var(--muted); font-size: 13px; } .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .product-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); border-top: 3px solid var(--accent); overflow: hidden; display: flex; flex-direction: column; transition: transform .14s ease, box-shadow .14s ease; } .product-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -18px rgba(20,32,43,.4); } .product-card.is-featured { box-shadow: 0 0 0 1px var(--accent) inset; } .pc-media { background: var(--accent-soft); aspect-ratio: 16 / 9; display: grid; place-items: center; color: var(--accent); } .pc-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 4px; flex: 1; } .pc-body h3 { font-size: 16px; } .pc-desc { font-size: 12.5px; color: var(--muted); } .pc-foot { margin-top: auto; padding-top: 16px; display: flex; align-items: center; justify-content: space-between; } .pc-price { font-family: var(--font-display); font-size: 17px; font-weight: 700; } .tag { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); } /* two-up simple rows (app/abonnement) */ .rows { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .row-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; } .row-card h3 { font-size: 15px; } .row-card p { color: var(--muted); font-size: 12.5px; margin: 6px 0 14px; } .row-card .line { display: flex; align-items: center; justify-content: space-between; } .row-card .price { font-family: var(--font-display); font-weight: 700; } /* ---- Score dashboard ---- */ .score { display: grid; grid-template-columns: 240px 1fr; gap: 48px; align-items: center; margin-top: 34px; } .phone { width: 210px; background: var(--ink); border-radius: 26px; padding: 12px; margin: 0 auto; } .phone-screen { background: var(--surface); border-radius: 16px; padding: 18px 16px 20px; } .phone-screen .who { text-align: center; font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .04em; } .ring-wrap { display: grid; place-items: center; margin: 10px 0 6px; } .ring-num { font-family: var(--font-display); font-size: 30px; font-weight: 700; } .score-label { text-align: center; font-size: 10.5px; letter-spacing: .14em; color: var(--muted); } .metrics { margin-top: 14px; border-top: 1px solid var(--border); } .metric { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 12.5px; } .metric .k { color: var(--muted); } .metric .v { font-weight: 600; } .metric .v.good { color: var(--accent); } .point { border-left: 3px solid var(--accent); padding: 2px 0 2px 14px; margin-bottom: 18px; } .point h4 { margin: 0 0 3px; font-family: var(--font-body); font-size: 14px; font-weight: 600; } .point p { margin: 0; font-size: 12.5px; color: var(--muted); } /* ---- Steps ---- */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 30px; } .step .ico { color: var(--accent); margin-bottom: 18px; } .step h3 { font-size: 15px; } .step .n { color: var(--accent); } .step p { color: var(--muted); font-size: 12.5px; margin-top: 6px; } /* ---- Trust band ---- */ .trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 6px; } .pillar { border-left: 3px solid var(--accent); padding-left: 16px; } .pillar h3 { font-size: 15px; } .pillar p { color: var(--muted); font-size: 12.5px; margin-top: 6px; } /* ---- Footer ---- */ .site-foot { background: var(--ink); color: #cfd6dd; margin-top: 8px; } .site-foot .wrap { display: flex; flex-wrap: wrap; gap: 40px; padding: 40px 24px; } .site-foot .brand { color: #fff; } .site-foot .brand .mark { background: var(--accent); filter: brightness(1.25); } .site-foot .tagline { font-size: 12px; color: #9aa6b1; max-width: 30ch; margin-top: 10px; } .foot-col { font-size: 12.5px; } .foot-col h4 { font-family: var(--font-body); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #9aa6b1; margin: 0 0 8px; } .foot-col a { display: block; color: #cfd6dd; padding: 3px 0; } .foot-col a:hover { color: #fff; } .foot-right { margin-left: auto; display: flex; gap: 48px; } /* ---- Accessibility / motion ---- */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } } /* ---- Responsive ---- */ @media (max-width: 880px) { .hero .wrap { grid-template-columns: 1fr; gap: 30px; } .choose { grid-template-columns: repeat(2, 1fr); } .grid { grid-template-columns: 1fr 1fr; } .score { grid-template-columns: 1fr; gap: 30px; } .steps, .trust { grid-template-columns: 1fr; gap: 20px; } .rows { grid-template-columns: 1fr; } } @media (max-width: 560px) { .nav-links { display: none; } .choose, .grid { grid-template-columns: 1fr; } .foot-right { flex-direction: column; gap: 24px; margin-left: 0; } }