/* ========================================================================== Visit Kebnekaise — theme -------------------------------------------------------------------------- THIS is the file to edit for colours, fonts and the custom styles. It loads after css/tailwind.css, so anything here wins. Colours are written in oklch(lightness chroma hue): lightness 0% = black, 100% = white chroma 0 = grey, higher = more saturated hue 0-360 degrees (65 = amber, 210 = blue, 250 = navy) Plain hex like #e8a33d works too if you prefer. ========================================================================== */ :root { /* ---- Brand ---------------------------------------------------------- */ --primary: oklch(78% 0.15 65); /* amber — buttons, links, accents */ --primary-foreground: oklch(18% 0.02 250); /* text on top of amber */ --accent: oklch(62% 0.08 210); /* secondary blue accent */ --accent-foreground: oklch(97% 0.005 240); /* ---- Page ----------------------------------------------------------- */ --background: oklch(17% 0.015 250); /* dark navy page background */ --foreground: oklch(95% 0.008 240); /* main text */ --muted: oklch(26% 0.018 250); --muted-foreground: oklch(72% 0.015 245); /* secondary / body text */ /* ---- Surfaces ------------------------------------------------------- */ --card: oklch(22% 0.018 250); --card-foreground: oklch(95% 0.008 240); --popover: oklch(22% 0.018 250); --popover-foreground: oklch(95% 0.008 240); --secondary: oklch(28% 0.02 250); --secondary-foreground: oklch(95% 0.008 240); /* ---- Lines & inputs ------------------------------------------------- */ --border: oklch(100% 0 0 / 0.12); --input: oklch(100% 0 0 / 0.15); --ring: oklch(78% 0.15 65); /* keyboard focus ring */ --radius: 0.625rem; /* corner rounding */ --destructive: oklch(57.7% 0.245 27.325); --destructive-foreground: oklch(98.4% 0.003 247.858); /* ---- Typography ------------------------------------------------------ Both fonts are loaded from Google Fonts in the of each page. If you change a family here, update that too. */ --font-display: "Bebas Neue", ui-sans-serif, sans-serif; /* headings, logo */ --font-body: "Barlow", ui-sans-serif, system-ui, sans-serif; /* ---- Effects -------------------------------------------------------- */ /* Dark fade over the hero photo so the text stays readable. Raise the .75 / 1 values to darken, lower them to reveal more photo. */ --gradient-summit: linear-gradient( 180deg, oklch(17% 0.015 250 / 0.1) 0%, oklch(17% 0.015 250 / 0.75) 65%, oklch(17% 0.015 250) 100% ); --shadow-ridge: 0 24px 60px -24px oklch(0% 0 0 / 0.75); } /* ========================================================================== Custom classes used in the HTML ========================================================================== */ /* Small uppercase label above a heading, e.g.

FAQ

*/ .eyebrow { font-size: 0.75rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--primary); } /* The gradient scrim sitting on top of the hero image */ .summit-overlay { background-image: var(--gradient-summit); } /* ========================================================================== Base elements ========================================================================== */ body { background-color: var(--background); color: var(--foreground); font-family: var(--font-body); -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: var(--font-display); letter-spacing: 0.02em; } /* Make in-page anchor jumps (#routes, #plan) clear the fixed header */ html { scroll-behavior: smooth; scroll-padding-top: 5rem; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* ========================================================================== Navigation -------------------------------------------------------------------------- One list of links serves both layouts: a horizontal row on wide screens, and a drop-down panel under the header on narrow ones. The breakpoint is 768px — change it in all three places below if you want it to switch earlier or later. ========================================================================== */ /* Wide screens: links in a row, menu button out of the way. */ .site-nav { display: flex; } .nav-toggle { display: none; } /* Never show the button before js/site.js has revealed it. */ .nav-toggle[hidden] { display: none; } @media (max-width: 767px) { .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; /* 44px — a comfortable thumb target */ height: 2.75rem; margin: -0.5rem -0.75rem -0.5rem 0; /* keeps the header its original height */ padding: 0; border: 0; border-radius: var(--radius); background: none; color: var(--foreground); cursor: pointer; } .nav-toggle:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } /* The panel, hanging below the header bar. Closed by default. */ .site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; padding: 0.25rem 1.25rem 0.75rem; background-color: var(--background); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-ridge); } /* js/site.js adds data-open to this element. */ .site-nav[data-open] { display: flex; } .site-nav a { padding: 0.875rem 0; border-top: 1px solid var(--border); } .site-nav a:first-child { border-top: 0; } } /* Swap the hamburger for a cross while the menu is open. */ .nav-icon-close { display: none; } .nav-toggle[aria-expanded="true"] .nav-icon-open { display: none; } .nav-toggle[aria-expanded="true"] .nav-icon-close { display: inline; } /* ========================================================================== Responsive refinements -------------------------------------------------------------------------- The layout was built with only two breakpoints (640px and 768px), which left some awkward gaps. These rules smooth them out. Each one says what it fixes, so you can adjust or remove any of them independently. ========================================================================== */ /* --- Hero heading ----------------------------------------------------- It used to jump in three hard steps: 60px, then 96px at 640, then 128px at 768. Now it scales continuously between 48px and 128px. The height part (20vh) matters for a phone held sideways: there the screen is wide but very short, so sizing on width alone made the title swallow the whole screen. Whichever of the two is smaller wins. */ .hero h1 { font-size: clamp(3rem, min(13vw, 20vh), 8rem); } /* --- Hero on short screens -------------------------------------------- A full-height hero on a sideways phone pushed the two buttons below the fold, so nobody saw them. On short screens the hero shrinks to fit its content instead. */ @media (max-height: 560px) and (orientation: landscape) { .hero { min-height: 0; } .hero > div:last-child { padding-top: 5.5rem; /* clears the fixed header */ padding-bottom: 2rem; } } /* --- Card grids between 600px and 768px -------------------------------- Large phones and small tablets fell into a gap: the three-column grids only started at 768px, so below that a single card stretched the full width of the screen. Two columns reads much better. */ @media (min-width: 600px) and (max-width: 767px) { #routes .grid, #stay .grid, #faq .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* --- Body text on small screens ---------------------------------------- 14px is a hard read on a phone. This lifts the small text inside the page content to 15px; headings, labels and the nav are untouched. */ @media (max-width: 639px) { main .text-sm { font-size: 0.9375rem; } } /* --- Logo tap target --------------------------------------------------- The logo is a link home but was only 28px tall. The negative margin cancels the padding, so the header keeps its original height. */ @media (max-width: 767px) { header a[href="index.html"]:first-of-type { display: inline-block; padding-block: 0.5rem; margin-block: -0.5rem; } } /* ========================================================================== Your own additions -------------------------------------------------------------------------- Tailwind utility classes (text-lg, mt-8, ...) only exist in tailwind.css if they were already used somewhere. A brand new one will do nothing. When you need something that isn't there, write plain CSS below instead. ========================================================================== */