/* Ruutuvihko — the shared visual world for all tool pages. A live 5 mm graph-paper notebook page: the tool writes its answer into the squares, final answers are double-underlined (the Finnish school convention), and the teacher's pen lives in the margin. Per-site identity: FI = red pen, INT = green pen (data-site on ). */ @font-face { font-family: "Archivo"; src: url("/shared/fonts/Archivo.woff2") format("woff2"); font-weight: 100 900; font-display: swap; } :root { --paper: #faf7ef; --grid-line: rgba(63, 110, 165, 0.14); --cell: 20px; --ink: #26292e; --ink-soft: #565b63; --pen: #1f4396; --pen-soft: #3a5cb0; --accent: #c0392f; /* red teacher's pen (FI default) */ --highlight: #ffe873; /* highlighter yellow */ --field-bg: #ffffff; --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace; } [data-site="int"] { --accent: #2e7d46; /* green pen for the international notebook */ } * { box-sizing: border-box; } html { scrollbar-color: var(--ink-soft) var(--paper); } body { margin: 0; font-family: "Archivo", system-ui, sans-serif; color: var(--ink); line-height: 1.5; background-color: var(--paper); background-image: linear-gradient(to right, var(--grid-line) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px); background-size: var(--cell) var(--cell); background-position-x: max(0px, calc(50% - 21rem)); caret-color: var(--pen); } /* The notebook's margin line: full page height, sitting at the column edge. */ body::before { content: ""; position: fixed; top: 0; bottom: 0; left: max(var(--cell), calc(50% - 21rem - var(--cell))); width: 2px; background: var(--accent); opacity: 0.75; pointer-events: none; } ::selection { background: var(--highlight); color: var(--ink); } header.site, main, footer.site { max-width: 42rem; margin: 0 auto; padding-left: calc(var(--cell) * 2); padding-right: var(--cell); } /* Brand as the notebook's name label. */ header.site { padding-top: var(--cell); padding-bottom: var(--cell); } header.site a { display: inline-block; background: var(--field-bg); border: 1.5px solid var(--ink); padding: 0.25rem 0.9rem; font-weight: 700; font-size: 0.95rem; letter-spacing: 0.01em; color: var(--ink); text-decoration: none; } header.site a:hover { box-shadow: inset 0 -3px 0 var(--highlight); } h1 { font-size: 1.7rem; font-weight: 780; font-variation-settings: "wght" 780; line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 var(--cell); text-wrap: balance; } h2 { font-size: 1.15rem; font-weight: 700; margin: calc(var(--cell) * 2) 0 calc(var(--cell) / 2); } /* The exercise box: drawn on the grid, not floating above it. */ .tool { border: 2px solid var(--ink); padding: var(--cell); margin: 0 0 var(--cell); } .tool h2 { margin-top: 0; } .field { margin: 0 0 calc(var(--cell) * 0.75); } .field label { display: block; font-size: 0.82rem; font-weight: 650; font-variation-settings: "wght" 650; margin-bottom: 0.3rem; } .field input, .field select { width: 100%; font-family: var(--mono); font-size: 1.02rem; font-variant-numeric: tabular-nums; padding: 0.45rem 0.55rem; border: 1.5px solid var(--ink); border-radius: 0; background: var(--field-bg); color: var(--ink); } .field input:focus, .field select:focus, button:focus-visible, a:focus-visible { outline: 2px solid var(--pen); outline-offset: 1px; } .field input[type="range"] { border: 0; padding: 0; accent-color: var(--pen); background: transparent; } .field input[type="checkbox"] { width: auto; accent-color: var(--pen); } .field input[type="date"] { font-family: var(--mono); } .field-row { display: flex; gap: calc(var(--cell) / 2); } .field-row .field { flex: 1; min-width: 0; } @media (max-width: 26rem) { .field-row { flex-wrap: wrap; } .field-row .field { flex: 1 1 9rem; } .field input[type="date"] { font-size: 0.9rem; } } .hint { font-size: 0.8rem; color: var(--ink-soft); margin-top: 0.25rem; } .hint.error, .hint:not(:empty).js-error { color: var(--accent); font-style: italic; } /* The answer: written in pen, double-underlined like a final answer. */ .result { padding: calc(var(--cell) / 2) 0 0; margin-top: calc(var(--cell) / 2); } .result strong { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 1.45rem; font-weight: 600; color: var(--pen); text-decoration-line: underline; text-decoration-style: double; text-decoration-color: var(--pen); text-decoration-thickness: 1.5px; text-underline-offset: 7px; line-height: calc(var(--cell) * 2); } @keyframes answer-rewrite { from { background-color: color-mix(in srgb, var(--highlight) 65%, transparent); } to { background-color: transparent; } } .result strong.rewrote { animation: answer-rewrite 650ms cubic-bezier(0.16, 1, 0.3, 1); } @media (prefers-reduced-motion: reduce) { .result strong.rewrote { animation: none; } } .result .sub { font-size: 0.88rem; color: var(--ink-soft); margin-top: 0.5rem; } /* The teacher's pen: a margin note in the accent ink. */ .margin-note { font-size: 0.82rem; font-style: italic; color: var(--accent); margin: 0.45rem 0 0; } /* Marginalia in the teacher's pen. */ .disclaimer { font-size: 0.85rem; color: var(--ink); background: linear-gradient(104deg, transparent 0.4%, var(--highlight) 1.2%, var(--highlight) 98.5%, transparent 99.2%); padding: 0.35rem 0.7rem; margin: calc(var(--cell) / 2) 0; } button { font-family: "Archivo", system-ui, sans-serif; font-weight: 700; font-size: 1.05rem; padding: 0.55rem 1.4rem; background: var(--pen); color: #fff; border: 1.5px solid var(--pen); border-radius: 0; cursor: pointer; } button:hover { background: var(--pen-soft); border-color: var(--pen-soft); } button:active { transform: translateY(1px); } a { color: var(--pen); text-decoration-thickness: 1px; text-underline-offset: 3px; } .seo-text p { margin: 0.7rem 0; } .seo-text { color: var(--ink); } /* Tables: ruled like the notebook, numbers in mono. */ table { border-collapse: collapse; margin: var(--cell) 0; min-width: 14rem; } th, td { text-align: left; padding: 0.35rem 1.2rem 0.35rem 0; border-bottom: 1px solid var(--line, rgba(38, 41, 46, 0.25)); } th { font-size: 0.82rem; font-weight: 650; font-variation-settings: "wght" 650; border-bottom-color: var(--ink); } td:last-child, th:last-child { font-family: var(--mono); font-variant-numeric: tabular-nums; } /* Comparison tables: every value column in mono, first column is the label. Values never wrap; a .table-scroll wrapper scrolls instead on narrow phones. */ .compare td:not(:first-child), .compare th:not(:first-child) { font-family: var(--mono); font-variant-numeric: tabular-nums; } .compare td, .compare th { white-space: nowrap; } .table-scroll { overflow-x: auto; } /* Compact rows: many-input tools pair fields two-up even inside the 360px box. */ .field-row.compact .field { flex: 1 1 6.5rem; } .stress-title { font-size: 1rem; font-weight: 700; margin: var(--cell) 0 0; } canvas { display: block; max-width: 100%; margin: var(--cell) 0; } /* Ad slots ("leikekohta"): a reserved paste-in area on the page, dormant until AdSense launch. Activate by adding class "ads-on" to in the same deploy that pastes the ins-tags — the height is reserved in first paint (13 cells = 260px ≥ a 300×250 rectangle), so ads load with zero CLS. Max two per page; never between inputs and result (Task Path Rule). */ .ad-slot { display: none; } body.ads-on .ad-slot { display: grid; place-items: center; min-height: calc(var(--cell) * 13); margin: calc(var(--cell) * 1.5) 0 var(--cell); border: 1px dashed var(--ink-soft); position: relative; } body.ads-on .ad-slot::before { content: attr(data-label); position: absolute; top: calc(-1 * var(--cell) * 0.9); left: 0; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--ink-soft); } .faq h3 { font-size: 1rem; font-weight: 700; margin: var(--cell) 0 0.2rem; } .faq p { margin: 0.2rem 0 0.8rem; color: var(--ink-soft); } .siblings { margin: var(--cell) 0; padding: 0; list-style: none; font-family: var(--mono); font-size: 0.88rem; } .siblings li { display: inline-block; margin: 0 1rem 0.45rem 0; } .siblings li::before { content: "→ "; color: var(--accent); } footer.site { border-top: 3px double var(--ink); margin-top: calc(var(--cell) * 2); padding-top: var(--cell); padding-bottom: calc(var(--cell) * 2); font-size: 0.84rem; color: var(--ink-soft); } footer.site a { color: var(--ink-soft); } /* Front-page directory: notebook table of contents. Category headings are hand-ruled with a single ink line; the lists themselves stay unchanged. The .toc quicklink row reuses the siblings idiom; anchors leave a cell of air above the heading when jumped to. */ .toc .siblings { margin: calc(var(--cell) * 0.75) 0 0; } .tool-group { margin: 0 0 var(--cell); scroll-margin-top: var(--cell); } .tool-group h2 { border-bottom: 1px solid var(--ink); padding-bottom: 0.2rem; } .tool-group .tool-list { margin-top: calc(var(--cell) * 0.5); } .tool-list { padding: 0; list-style: none; } .tool-list li { margin: calc(var(--cell) * 0.75) 0; } .tool-list a { font-weight: 700; font-size: 1.05rem; } .tool-list .desc { color: var(--ink-soft); font-size: 0.9rem; }