--- version: alpha name: "Travel agency template by 8B" description: "Travel agency one-pager for small-group rail journeys: olive and cream ticket surfaces, wide uppercase type and an amber accent. Free HTML template by 8B, MIT." colors: primary: "#465016" secondary: "#5f6834" tertiary: "#d49a3a" neutral: "#e6dcbf" surface: "#e6dcbf" on-surface: "#1d2209" on-primary: "#e6dcbf" night: "#1d2209" olive-light: "#5f6834" brown: "#4a2f14" accent-amber: "#d49a3a" typography: headline-display: fontFamily: TikTok Sans fontSize: 6.6rem fontWeight: 800 lineHeight: 0.92 letterSpacing: -0.035em headline-lg: fontFamily: TikTok Sans fontSize: 5.4rem fontWeight: 800 lineHeight: 0.92 letterSpacing: -0.035em headline-md: fontFamily: TikTok Sans fontSize: 3.6rem fontWeight: 800 lineHeight: 0.92 letterSpacing: -0.035em headline-sm: fontFamily: TikTok Sans fontSize: 1.6rem fontWeight: 800 lineHeight: 1 letterSpacing: -0.02em headline-wordmark: fontFamily: TikTok Sans fontSize: 14rem fontWeight: 800 lineHeight: 0.85 letterSpacing: -0.04em body-lg: fontFamily: Schibsted Grotesk fontSize: 1.375rem fontWeight: 500 lineHeight: 1.42 letterSpacing: -0.005em body-md: fontFamily: Schibsted Grotesk fontSize: 1.0625rem fontWeight: 400 lineHeight: 1.55 label-md: fontFamily: Schibsted Grotesk fontSize: 0.8125rem fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.08em button: fontFamily: TikTok Sans fontSize: 0.875rem fontWeight: 700 lineHeight: 1 letterSpacing: 0em rounded: none: 0px sm: 0.5rem xl: 2.25rem full: 999px spacing: gutter: 3.75rem gutter-phone: 1rem section-y: 9.5rem section-y-phone: 5rem nav-height: 4.25rem sheet-max: 78rem contact-max: 80rem shadow-offset: 0.5rem window-border: 0.5rem components: button-primary: backgroundColor: "{colors.accent-amber}" textColor: "{colors.night}" typography: "{typography.button}" rounded: "{rounded.full}" padding: 1.6rem height: 3.25rem button-dark: backgroundColor: "{colors.night}" textColor: "{colors.neutral}" typography: "{typography.button}" rounded: "{rounded.full}" padding: 1.6rem height: 3.25rem nav-bar: backgroundColor: "{colors.primary}" textColor: "{colors.neutral}" height: 4.25rem ticket-card: backgroundColor: "{colors.surface}" textColor: "{colors.on-surface}" typography: "{typography.body-md}" rounded: "{rounded.sm}" padding: 1.4rem input-field: backgroundColor: transparent textColor: "{colors.on-surface}" typography: "{typography.body-md}" rounded: "{rounded.sm}" padding: 0.7rem height: 3rem window-frame: backgroundColor: "{colors.night}" rounded: "{rounded.xl}" padding: 0.5rem faq-row: textColor: "{colors.neutral}" typography: "{typography.headline-sm}" padding: 1.35rem --- # Binario Tre ## Overview Binario Tre is a one-page site for a small-group tour operator that sells dated rail journeys through Italy. The one idea is the paper railway ticket: cream cards with serrated edges, tilted like tickets dealt onto a table, set on olive, brown and near-black grounds the colour of old carriage upholstery. Wide uppercase type shouts the destination, a quiet grotesque carries the details, and one amber accent marks what you can press. It should feel unhurried and handmade. The people and prices in the demo are invented. ## Colors The palette has six values, all `--color-*` variables in `:root`. Olive does most of the work and cream is the text colour on it. - **Primary, olive (#465016):** page ground, the fixed nav bar, the opening plate, route, hosts, what-is-included, private hire and footer sections, and the first ground of the day section. - **Neutral and surface, cream (#e6dcbf):** body text on dark grounds, the ticket, table and form surfaces, the filled part of the route rail and the cream sleeper bars. - **Night (#1d2209):** journeys and FAQ grounds, text on cream tickets, the dark button, the hard offset shadow, window backgrounds and the last ground of the day section. - **Olive light (#5f6834):** the route rail, FAQ and footer dividers, and one of the three sleeper-bar colours. It is also the `secondary` token. - **Brown (#4a2f14):** the carriage screen under the opening, the departures and contact grounds, and the middle ground of the day section. - **Amber (#d49a3a):** filled buttons, window frames, the route marker, entry times and rules in the day section, small labels on brown, and focus outlines. Amber is never a large field. ## Typography - **TikTok Sans** is loaded at weights 600 to 800 and stretched to 140%. Every use is weight 800 or 700 and uppercase: the display title, section headings, ticket titles and prices, buttons, the nav brand and the footer wordmark. Headings are tightly tracked; buttons keep normal tracking. - **Schibsted Grotesk** is loaded at 400 to 700 and carries body text at 400, lead paragraphs at 500, links at 600 and small labels at 700. The hero title is sized from the character count of its longer line (`--len`) and the width of the olive plate, so it reaches about 84px at 1440px and is capped at 6.6rem. Section headings scale from 2.4rem to 5.4rem, with a few set smaller. Labels are 13px, uppercase, tracked at 0.08em. ## Layout Ten sections stack inside a fixed bar. The page gutter is `clamp(1rem, 4.5vw, 3.75rem)` and section padding is `clamp(5rem, 11vw, 9.5rem)`. Content widths are 78rem for the ticket grid, table and included ticket, and 80rem for contact. The opening is two screens. The first is a full-bleed landscape under an olive plate holding the title, lead and buttons. The second is a brown carriage screen with a rounded window photo beside three facts. Below come a three-stop rail, a two-column grid of four tickets, three hosts in staggered columns (the middle one dropped lower), a sticky window beside timed entries, a table of departures, a ticket with a stub, a two-column FAQ, a tilted private hire band, and a two-column contact block. Breakpoints: 960px swaps nav links for a menu button, 860px collapses nearly every multi-column block to one column and turns the route rail vertical, 760px turns the table into stacked rows, and 389px shrinks one heading. ## Elevation & Depth Depth comes from a hard shadow, `0.5rem 0.5rem 0` in night with no blur, on tickets and the private band. The title has a matching offset text shadow. Otherwise depth is layering: the sticky landscape under the plate, rotated tickets, a tilted band across a photo, and grounds stepping from olive to brown to night. ## Shapes Shapes mix three radii. Buttons, the nav badge, the route rail and marker, and the day rules are pills (999px). Photos and window frames use 2.25rem, and tickets, inputs and notch tabs use 0.5rem. Windows have a 0.5rem amber border, and the opening window has a small amber tab on its top edge. Tickets have serrated strips along the top and bottom made from a night band with cream diamonds cut into it. Sleeper bars are skewed by minus 9 degrees in cream, night and olive light. ## Components - **button-primary:** amber pill, night text, 14px uppercase, 3.25rem tall. On hover devices the label slides out to the right while a copy slides in from the left. - **button-dark:** the same pill in night with cream text, used on cream surfaces: ticket Dates buttons, the private hire band and the form. - **nav-bar:** olive, 4.25rem tall, round badge with the digit 3, six links and the amber button. Links are underlined with skewed dashes that slide on hover. - **ticket-card:** cream surface with serrated strips, most of them tilted slightly, used for journeys, the departures sheet, included, stub and form. - **input-field:** transparent, 2px night border, 0.5rem corners, 3rem tall, label in the small uppercase style. - **window-frame:** photo holder with amber border and 2.25rem corners. - **faq-row:** native details with a 2px olive light top rule and a plus that turns into a cross. ## Motion The page loads GSAP 3.13 and ScrollTrigger from jsDelivr, plus Lenis for smooth scrolling. The idea is a journey: things travel, deal, open and tilt into place as you scroll, and most scenes are tied to scroll position. - **Opening:** on load the landscape eases down from a slight zoom, title lines rise over 0.9s, the second 0.08s behind the first, and the landscape drifts sideways in a 16s loop. The sleeper bars under the plate loop at 1.4s. As the carriage screen arrives, the full-bleed layer is clipped down to the window photo, the title lines slide apart and the shade fades. - **Route:** a marker rides the rail past three stops and fills it in cream. Eight slats over each stop, in cream, night and olive light, fall away as it arrives. The marker travels sideways on wide screens and down the left on narrow ones. - **Journeys:** four tickets start piled in the middle of the top row and deal out to their tilts. On narrow screens each ticket drops from the one above. - **Hosts, departures, FAQ, contact:** headings glide in from the left with a slight skew. Host and contact photo frames open upward from the bottom edge and the image settles from a zoom. - **Day:** the window stays sticky while rules draw across, the ground changes from olive to brown to night and the photos wipe upward. - **Departures and footer:** sleeper bars slide sideways with scroll. - **Included:** punched holes scale in, then the stub, starting flush against the ticket's edge, swings away to its tilt. - **Private:** the band rotates into its tilt, the ribbon swings across and the photo eases down from a zoom. With reduced motion the scroll scenes, entrance animations, loops and Lenis smooth scrolling are off, so scrolling is native. The day section then stays olive and shows its first photo. Hiding the nav after about 24px of downward scrolling, the button label swap, the link underline slide and the FAQ plus rotation are not gated and keep running. ## Do's and Don'ts - Do keep one display face, stretched, uppercase and heavy, and one grotesque for text. - Do use amber only for buttons, window frames, the route marker, times, rules, small labels and focus rings. - Do put information on cream tickets with serrated edges and hard shadows. - Do tilt tickets by only a degree or two. - Don't add soft shadows, gradients, glass effects or stock icons. - Don't round tickets beyond 0.5rem or square off photos and windows. - Don't add a third typeface or lowercase display headings. - Don't use white or black. Cream and night are the lightest and darkest values. - Don't replace the departures table with cards. Keep it a real table with a caption.