/* ========================================================================== ROLETA THEME ========================================================================== THIS IS THE ONLY FILE YOU NEED TO EDIT TO RESTYLE THE WHOLE SITE. Load order matters: theme.css comes AFTER roleta.css in base.html, so anything you set here wins. Change a value, save, refresh the browser. No restart, no rebuild. HOW TO USE A READY-MADE PALETTE Scroll to PRESET PALETTES at the bottom. Copy one block, paste it over the :root block below, save. HOW TO PICK YOUR OWN COLOURS Only four really matter: --forest your brand colour: buttons, links, accents --mint the page background --ink body text --wheat one sharp accent, used sparingly The rest are shades derived from those. If you change --forest, also change --forest-dark (about 15% darker) and --forest-tint (very pale version of the same hue) or hover states will look wrong. ========================================================================== */ :root{ /* ---------- BRAND ---------- */ --forest: #1F6B33; /* primary: buttons, links, active nav */ --forest-dark: #165126; /* button hover. Roughly 15% darker than above */ --forest-tint: #E8F3E9; /* pale badges and highlights. Same hue, very light */ --wheat: #D9B44A; /* single accent. Use it rarely or it stops being an accent */ /* ---------- SURFACES ---------- */ --mint: #F1F7F1; /* page background */ --mint-2: #E4F0E5; /* tinted panels, slightly deeper than the page */ --white: #FFFFFF; /* cards */ --sky: #E7F0F6; /* the cool fill used in diagrams and glazing */ /* ---------- TEXT ---------- */ --ink: #152018; /* body text. Keep this very dark for legibility */ --ink-2: #4A5A4F; /* secondary text, descriptions */ --ink-3: #84968A; /* captions, hints, disabled */ /* ---------- LINES ---------- */ --line: #DDE8DE; /* card borders */ --line-2: #EDF3ED; /* internal dividers, lighter */ /* ---------- DIAGRAMS ---------- */ --steel: #5E7C8A; /* structure, galvanised tube in the greenhouse drawing */ /* ---------- SHAPE ---------- How rounded everything is. Lower numbers read as more technical and serious, higher as friendlier. 0 is sharp, 24 is very round. */ --r: 16px; /* cards, panels, images */ --r-sm: 10px; /* inputs, small elements */ /* ---------- DEPTH ---------- How much cards lift off the page. Flat: --shadow: none; Subtle: the default below Prominent: 0 2px 4px rgba(21,32,24,.06), 0 12px 32px rgba(21,32,24,.10) */ --shadow: 0 1px 2px rgba(21,32,24,.04), 0 8px 24px rgba(21,32,24,.05); /* ---------- TYPE ---------- Change these to restyle all text. If you use a font that is not on the visitor's machine, add it to the Google Fonts link in base.html too. Alternatives worth trying: 'Plus Jakarta Sans' friendlier, rounder 'Source Sans 3' neutral, very legible on cheap screens 'DM Sans' geometric, a little more character */ --sans: 'Inter','Segoe UI',system-ui,-apple-system,sans-serif; --mono: 'IBM Plex Mono',ui-monospace,Menlo,monospace; /* ---------- WIDTH ---------- */ --wrap: 1180px; /* how wide the content runs on a big screen */ } /* ========================================================================== ICON STYLE Icons are drawn as outlines. This controls how heavy those lines are. 1.4 = fine and delicate 1.8 = the default, balanced 2.4 = bold, reads better on small screens ========================================================================== */ svg[stroke]{ stroke-width: 1.8; } /* Bevelled and glossy icon styles read as dated to most eyes now, and they do not scale cleanly on small screens. If you still want a raised look, this gives a restrained version - uncomment to try it. .ico, .navuser .avatar, .brand .mark{ background-image: linear-gradient(160deg, rgba(255,255,255,.28), rgba(0,0,0,.10)); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.10), 0 1px 2px rgba(21,32,24,.14); } */ /* ========================================================================== PRESET PALETTES Copy one block and paste it over the :root block at the top of this file. ========================================================================== ---- 1. EARTH (terracotta and sage. Warmer, more agricultural) ---- :root{ --forest:#8C4A2F; --forest-dark:#6E3722; --forest-tint:#F6E9E2; --wheat:#C9922B; --mint:#F7F4EF; --mint-2:#EDE6DA; --white:#FFFFFF; --sky:#E9EFE6; --ink:#241C15; --ink-2:#5B4E43; --ink-3:#968878; --line:#E3DACC; --line-2:#F0EAE0; --steel:#7A6A58; --r:12px; --r-sm:8px; --shadow:0 1px 2px rgba(36,28,21,.05), 0 8px 24px rgba(36,28,21,.06); --sans:'Inter','Segoe UI',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace; --wrap:1180px; } ---- 2. DEEP (dark, premium. Good for investor decks and screenshots) ---- :root{ --forest:#4FA96B; --forest-dark:#3E8B56; --forest-tint:#1D3326; --wheat:#E0BC5C; --mint:#121A15; --mint-2:#1B2620; --white:#1E2A23; --sky:#1B2C33; --ink:#E8F0E9; --ink-2:#A8BCAE; --ink-3:#7A8E80; --line:#2C3B32; --line-2:#243029; --steel:#7FA0AE; --r:14px; --r-sm:9px; --shadow:0 1px 2px rgba(0,0,0,.30), 0 10px 30px rgba(0,0,0,.35); --sans:'Inter','Segoe UI',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace; --wrap:1180px; } ---- 3. CLEAN (near-white, sharp corners. Reads as engineering software) ---- :root{ --forest:#0F766E; --forest-dark:#0B5A54; --forest-tint:#E0F2F1; --wheat:#C2851B; --mint:#FAFAFA; --mint-2:#F0F1F0; --white:#FFFFFF; --sky:#EAF1F5; --ink:#18181B; --ink-2:#52525B; --ink-3:#8B8B93; --line:#E4E4E7; --line-2:#F1F1F3; --steel:#64748B; --r:6px; --r-sm:4px; --shadow:0 1px 2px rgba(0,0,0,.05); --sans:'Inter','Segoe UI',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace; --wrap:1240px; } ---- 4. SUNRISE (warm gold on cream. Bright and optimistic) ---- :root{ --forest:#B45309; --forest-dark:#92400E; --forest-tint:#FEF3C7; --wheat:#0F766E; --mint:#FFFBF3; --mint-2:#FDF0DC; --white:#FFFFFF; --sky:#EEF4F7; --ink:#1C1917; --ink-2:#57534E; --ink-3:#928C85; --line:#EFE3D0; --line-2:#F8F1E5; --steel:#78716C; --r:18px; --r-sm:12px; --shadow:0 1px 2px rgba(28,25,23,.04), 0 8px 24px rgba(28,25,23,.06); --sans:'Inter','Segoe UI',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace; --wrap:1180px; } ========================================================================== */