/* ========================================================= KARJERAS KOMPASS — shared stylesheet Design tokens: see comments below each block. ========================================================= */ /* Font is loaded via in each page's (faster + more reliable than @import — the browser discovers it immediately instead of waiting for this CSS file to parse). */ :root{ /* Color — brand palette: black & white with brand yellow (#FFDE59) as the single accent. Variable names below are historical ("marigold"/"sage") but now both point into this black/white/yellow system — marigold = brand yellow, sage = black secondary accent. */ --paper: #FFFFFF; --paper-alt: #F4F4F4; --ink: #111111; --ink-soft: #4D4D4D; --ink-faint: #8C8C8C; --line: #E2E2E2; --white: #FFFFFF; --marigold: #FFDE59; --marigold-dark:#E6C233; --marigold-tint:#FFF6CF; --sage: #111111; --sage-dark: #000000; --sage-tint: #F2F2F2; /* Type */ --font-display: "Lora", "Iowan Old Style", Georgia, serif; --font-body: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Layout */ --maxw: 1180px; --radius-s: 10px; --radius-m: 16px; --radius-l: 28px; --shadow-card: 0 1px 2px rgba(17,17,17,.04), 0 12px 28px -16px rgba(17,17,17,.18); } *, *::before, *::after{ box-sizing: border-box; } html{ scroll-behavior: smooth; } html:focus-within{ scroll-behavior: smooth; } body{ margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; } img{ max-width: 100%; display: block; } a{ color: inherit; } h1, h2, h3, h4{ font-family: var(--font-display); color: var(--ink); font-weight: 600; line-height: 1.12; margin: 0 0 .5em; letter-spacing: -.01em; } h1{ font-size: clamp(2.2rem, 1.55rem + 2.9vw, 3.6rem); font-weight: 600; } h2{ font-size: clamp(1.7rem, 1.35rem + 1.6vw, 2.5rem); } h3{ font-size: 1.28rem; } p{ margin: 0 0 1em; } em{ font-family: var(--font-display); font-style: italic; color: var(--ink); background: var(--marigold); padding: .02em .32em; border-radius: .2em; box-decoration-break: clone; -webkit-box-decoration-break: clone; } em.note{ background: none; color: var(--ink-faint); padding: 0; border-radius: 0; font-family: var(--font-body); } .container{ max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; } /* Focus visibility */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{ outline: 2.5px solid var(--marigold-dark); outline-offset: 3px; } @media (prefers-reduced-motion: reduce){ *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* ---------- Eyebrow / labels ---------- */ .eyebrow{ display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-weight: 700; font-size: .78rem; letter-spacing: .09em; text-transform: uppercase; color: var(--sage-dark); margin-bottom: 1em; } .eyebrow::before{ content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--marigold); flex: none; } /* ---------- Buttons ---------- */ .btn{ display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-body); font-weight: 700; font-size: .98rem; padding: 14px 26px; border-radius: 999px; border: 1.5px solid transparent; cursor: pointer; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease; white-space: nowrap; } .btn:hover{ transform: translateY(-1.5px); } .btn-primary{ background: var(--marigold); color: #111111; box-shadow: 0 10px 24px -12px rgba(230,194,51,.55); } .btn-primary:hover{ background: var(--marigold-dark); color: #fff; } .btn-ghost{ background: transparent; border-color: var(--line); color: var(--ink); } .btn-ghost:hover{ border-color: var(--ink); } .btn-dark{ background: var(--ink); color: var(--paper); } .btn-dark:hover{ background: #000000; } .btn-sm{ padding: 10px 18px; font-size: .88rem; } .btn svg{ width: 16px; height: 16px; flex: none; } /* ---------- Header ---------- */ .site-header{ position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.88); backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--line); } .site-header .container{ display: flex; align-items: center; justify-content: space-between; padding-block: 14px; } .wordmark{ display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--font-display); font-weight: 600; font-size: 1.28rem; color: var(--ink); } .wordmark .mark{ width: 30px; height: 30px; flex: none; } .wordmark small{ display: block; font-family: var(--font-body); font-weight: 600; font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); margin-top: 1px; } .nav-desktop{ display: flex; align-items: center; gap: 30px; } .nav-links{ display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; } .nav-links a{ text-decoration: none; font-weight: 600; font-size: .96rem; color: var(--ink-soft); padding-block: 6px; border-bottom: 2px solid transparent; transition: color .15s ease, border-color .15s ease; } .nav-links a:hover, .nav-links a[aria-current="page"]{ color: var(--ink); border-color: var(--marigold); } .nav-actions{ display: flex; align-items: center; gap: 14px; } .ig-link{ display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--line); color: var(--ink-soft); transition: border-color .15s ease, color .15s ease; } .ig-link:hover{ border-color: var(--ink); color: var(--ink); } .ig-link svg{ width: 17px; height: 17px; } .nav-toggle{ display: none; width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--line); background: transparent; align-items: center; justify-content: center; cursor: pointer; } .nav-toggle svg{ width: 19px; height: 19px; } .mobile-panel{ display: none; border-top: 1px solid var(--line); background: var(--paper); } .mobile-panel.open{ display: block; } .mobile-panel .container{ flex-direction: column; align-items: stretch; padding-block: 18px; gap: 4px; } .mobile-panel a{ display: block; padding: 12px 4px; text-decoration: none; font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--line); } .mobile-panel a:last-child{ border-bottom: none; } @media (max-width: 880px){ .nav-desktop{ display: none; } .nav-toggle{ display: inline-flex; } } /* ---------- Hero ---------- */ .hero{ padding-block: 64px 84px; position: relative; overflow: clip; } .hero .container{ display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; } .hero h1{ margin-bottom: .4em; } .hero .lede{ font-size: 1.14rem; color: var(--ink-soft); max-width: 46ch; margin-bottom: 1.6em; } .hero-ctas{ display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 2.2em; } .trust-row{ display: flex; flex-wrap: wrap; gap: 22px; list-style: none; padding: 0; margin: 0; } .trust-row li{ display: flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 600; color: var(--ink-soft); } .trust-row svg{ width: 17px; height: 17px; color: var(--sage-dark); flex: none; } .hero-art{ position: relative; } .hero-art svg{ width: 100%; height: auto; } @media (max-width: 940px){ .hero .container{ grid-template-columns: 1fr; } .hero-art{ display: none; } } /* ---------- Section rhythm ---------- */ section{ padding-block: 76px; } .section-alt{ background: var(--paper-alt); } .section-dark{ background: var(--ink); color: var(--paper); } .section-dark h2, .section-dark h3{ color: var(--paper); } .section-dark .ink-soft-on-dark{ color: #B3B3B3; } .section-head{ max-width: 640px; margin-bottom: 3em; } .section-head.center{ margin-inline: auto; text-align: center; } .section-head p{ color: var(--ink-soft); font-size: 1.05rem; } .section-dark .section-head p{ color: #B3B3B3; } /* route divider used between sections: small dotted path glyph */ .route-divider{ display: flex; align-items: center; gap: 10px; color: var(--ink-faint); margin-bottom: 2.4em; } .route-divider svg{ width: 46px; height: 14px; flex: none; } .route-divider span{ font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } /* ---------- Pain point / feeling cards ---------- */ .grid-3{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .grid-2{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } @media (max-width: 880px){ .grid-3{ grid-template-columns: 1fr 1fr; } .grid-2{ grid-template-columns: 1fr; } } @media (max-width: 620px){ .grid-3{ grid-template-columns: 1fr; } .btn{ white-space: normal; text-align: center; } .hero-ctas{ flex-direction: column; align-items: stretch; } .hero-ctas .btn{ justify-content: center; } } .feel-card{ background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 26px 24px; } .feel-card p{ margin: 0; color: var(--ink-soft); font-size: .98rem; } .feel-card .quote-mark{ font-family: var(--font-display); font-size: 2.2rem; color: var(--marigold); line-height: 1; display: block; margin-bottom: .1em; } /* ---------- Path / steps ---------- */ .path-steps{ position: relative; padding-left: 46px; } .path-steps::before{ content: ""; position: absolute; left: 12px; top: 8px; bottom: 8px; width: 2px; background: repeating-linear-gradient(to bottom, var(--line) 0 6px, transparent 6px 12px); } .path-step{ position: relative; padding-bottom: 42px; } .path-step:last-child{ padding-bottom: 0; } .path-step::before{ content: ""; position: absolute; left: -46px; top: 2px; width: 26px; height: 26px; border-radius: 50%; background: var(--paper); border: 2.5px solid var(--marigold); } .path-step::after{ content: ""; position: absolute; left: -37px; top: 11px; width: 8px; height: 8px; border-radius: 50%; background: var(--marigold); } .path-step h3{ margin-bottom: .3em; } .path-step p{ color: var(--ink-soft); margin: 0; max-width: 52ch; } /* ---------- Product cards ---------- */ .product-card{ background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-l); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-card); } .product-card .cover{ aspect-ratio: 4 / 3; background: linear-gradient(155deg, var(--sage-tint), var(--marigold-tint)); display: flex; align-items: center; justify-content: center; position: relative; } .product-card .cover svg{ width: 56%; height: 56%; } .product-card .badge{ position: absolute; top: 14px; left: 14px; background: var(--ink); color: var(--paper); font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; } .product-card .body{ padding: 26px 24px 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; } .product-card .kicker{ font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sage-dark); } .product-card ul.feature-list{ list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-direction: column; gap: 8px; } .product-card ul.feature-list li{ display: flex; gap: 8px; font-size: .92rem; color: var(--ink-soft); } .feature-list svg{ width: 16px; height: 16px; color: var(--sage-dark); flex: none; margin-top: 3px; } .product-card .price-row{ display: flex; align-items: baseline; justify-content: space-between; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); } .product-card .price{ font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; } .product-card .price small{ font-family: var(--font-body); font-size: .74rem; color: var(--ink-faint); font-weight: 600; } .product-card.coming-soon{ opacity: .8; } .product-card.coming-soon .cover{ background: var(--paper-alt); } /* ---------- Testimonials ---------- */ .testimonial-card{ background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 26px 24px; } .testimonial-card p{ color: var(--ink-soft); font-style: italic; font-family: var(--font-display); font-size: 1.06rem; } .testimonial-card .who{ display: flex; align-items: center; gap: 10px; margin-top: 14px; } .avatar-dot{ width: 34px; height: 34px; border-radius: 50%; background: var(--sage-tint); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 600; color: var(--sage-dark); font-size: .9rem; } .who .name{ font-weight: 700; font-size: .92rem; } .who .role{ font-size: .8rem; color: var(--ink-faint); } /* ---------- CTA band ---------- */ .cta-band{ background: var(--ink); border-radius: var(--radius-l); padding: 56px 48px; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; } .cta-band h2{ color: var(--paper); margin-bottom: .25em; } .cta-band p{ color: #B3B3B3; margin: 0; max-width: 44ch; } /* ---------- Placeholder blocks (photo etc.) ---------- */ .photo-placeholder{ aspect-ratio: 3/4; border-radius: var(--radius-l); background: repeating-linear-gradient(135deg, var(--paper-alt), var(--paper-alt) 10px, var(--white) 10px, var(--white) 20px); border: 1.5px dashed var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--ink-faint); text-align: center; padding: 24px; position: relative; overflow: hidden; } .photo-placeholder svg{ width: 44px; height: 44px; } .photo-placeholder span{ font-size: .82rem; font-weight: 700; max-width: 20ch; } /* img-slot: drop a file with the right name into assets/images/ and it automatically covers the placeholder. If the file is missing, the image fails to load, onerror hides it, and the placeholder stays visible. */ .img-slot img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; z-index: 1; } .product-card .cover.img-slot img{ border-radius: 0; } /* ---------- Forms ---------- */ .form-grid{ display: grid; gap: 18px; } .form-row{ display: flex; flex-direction: column; gap: 6px; } .form-row label{ font-weight: 700; font-size: .88rem; } .form-row input, .form-row textarea, .form-row select{ font-family: var(--font-body); font-size: .98rem; padding: 12px 14px; border-radius: var(--radius-s); border: 1.5px solid var(--line); background: var(--white); color: var(--ink); } .form-row textarea{ resize: vertical; min-height: 120px; } .form-note{ font-size: .82rem; color: var(--ink-faint); } .form-success{ display: none; background: var(--sage-tint); border: 1px solid var(--sage); color: var(--sage-dark); padding: 14px 16px; border-radius: var(--radius-s); font-weight: 700; margin-top: 14px; } .form-success.show{ display: block; } /* ---------- FAQ ---------- */ .faq-item{ border-bottom: 1px solid var(--line); } .faq-item summary{ cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 20px 2px; font-weight: 700; font-family: var(--font-display); font-size: 1.08rem; } .faq-item summary::-webkit-details-marker{ display: none; } .faq-item summary .plus{ width: 22px; height: 22px; flex: none; border-radius: 50%; border: 1.5px solid var(--line); position: relative; } .faq-item summary .plus::before, .faq-item summary .plus::after{ content:""; position:absolute; background: var(--ink); } .faq-item summary .plus::before{ left: 5px; right: 5px; top: 50%; height: 1.5px; transform: translateY(-50%); } .faq-item summary .plus::after{ top: 5px; bottom: 5px; left: 50%; width: 1.5px; transform: translateX(-50%); transition: opacity .15s ease; } .faq-item[open] summary .plus::after{ opacity: 0; } .faq-item p{ padding-bottom: 20px; color: var(--ink-soft); margin: 0; max-width: 62ch; } /* ---------- Footer ---------- */ .site-footer{ border-top: 1px solid var(--line); padding-block: 48px 32px; } .footer-top{ display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; margin-bottom: 34px; } .footer-cols{ display: flex; gap: 56px; flex-wrap: wrap; } .footer-col h4{ font-family: var(--font-body); font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 14px; } .footer-col ul{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .footer-col a{ text-decoration: none; font-weight: 600; font-size: .94rem; color: var(--ink-soft); } .footer-col a:hover{ color: var(--ink); } .footer-bottom{ border-top: 1px solid var(--line); padding-top: 22px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .82rem; color: var(--ink-faint); } /* ---------- Page hero (inner pages) ---------- */ .page-hero{ padding-block: 56px 20px; } .page-hero .eyebrow{ margin-bottom: .7em; } .page-hero .lede{ color: var(--ink-soft); font-size: 1.08rem; max-width: 60ch; } /* Utility */ .mt-0{ margin-top: 0; } .text-center{ text-align: center; } .stack-center{ display:flex; flex-direction:column; align-items:center; }