/* --------------------------------------------------------------------------- FRUIT THEMES Each page gets its own fruit. Set in the HTML and add a matching block here. Put the fruit's pixel art in assets/ first. --------------------------------------------------------------------------- */ body[data-fruit="cherry"] { --bg: #fff5f7; --text: #4a0d20; --muted: #8c3a52; --accent: #e8114f; --accent-2: #a4133c; --soft: #ffd9e2; --border: #f7aec1; --card: #fffafb; --fruit-art: url("../assets/cherry.png"); } body[data-fruit="grape"] { --bg: #f9f5ff; --text: #2e1147; --muted: #6b4a8c; --accent: #8b2fc9; --accent-2: #5f1a91; --soft: #e9d9f7; --border: #c9a6e6; --card: #fdfbff; --fruit-art: url("../assets/grape.png"); } /* To add a page, copy a block above, rename the fruit, recolor it, and point --fruit-art at the new art file. */ /* --------------------------------------------------------------------------- */ * { box-sizing: border-box; } html, body { margin: 0; min-height: 100%; } body { font-family: "Pixelify Sans", "Courier New", monospace; background: var(--bg); color: var(--text); min-height: 100vh; font-size: 18px; line-height: 1.65; position: relative; } /* Tiled fruit pattern, sits behind everything */ body::before { content: ""; position: fixed; inset: 0; background-image: var(--fruit-art); background-repeat: repeat; background-size: 88px; image-rendering: pixelated; opacity: 0.10; pointer-events: none; z-index: 0; } /* NAV */ .nav { position: relative; z-index: 1; display: flex; gap: 24px; justify-content: center; padding: 22px 24px 0; } .nav a { color: var(--muted); text-decoration: none; font-weight: 600; padding-bottom: 2px; } .nav a:hover { color: var(--accent); } .nav a.here { color: var(--accent-2); border-bottom: 3px solid var(--accent); } /* LAYOUT */ .page { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; padding: 48px 24px 96px; } h1 { font-size: clamp(2rem, 6vw, 3rem); font-weight: 700; margin: 0 0 10px; line-height: 1.2; } h2 { font-size: 1.4rem; font-weight: 700; margin: 0 0 16px; color: var(--accent-2); text-align: center; } .block { margin-bottom: 64px; } .block:last-child { margin-bottom: 0; } /* INTRO */ .intro { text-align: center; margin-bottom: 64px; } .tagline { font-size: 1.1rem; color: var(--accent); margin: 0 0 18px; } .blurb { color: var(--muted); margin: 0 auto 28px; max-width: 560px; } .actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; } /* BUTTONS */ .btn { display: inline-block; font-family: inherit; font-size: 1rem; font-weight: 600; padding: 12px 28px; border: 2px solid var(--accent-2); border-radius: 0; cursor: pointer; text-decoration: none; box-shadow: 4px 4px 0 var(--accent-2); transition: transform 0.1s ease, box-shadow 0.1s ease; } .btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--accent-2); } .btn-primary { background: var(--accent); color: #fff; } .btn-secondary { background: var(--card); color: var(--text); } /* CARDS */ .card { background: var(--card); border: 2px solid var(--accent-2); box-shadow: 6px 6px 0 var(--soft); padding: 24px; text-align: center; } .card-name { font-size: 1.6rem; font-weight: 700; color: var(--accent); margin: 0 0 4px; } .card-text { color: var(--muted); margin: 12px 0 0; } .rating { font-weight: 700; color: var(--accent-2); letter-spacing: 1px; margin: 0; } .note { color: var(--muted); font-size: 0.85rem; margin: 12px 0 0; text-align: center; } /* PHOTOS */ .photo { margin: 0 0 16px; border: 2px solid var(--border); background: var(--soft); overflow: hidden; } .photo img { display: block; width: 100%; height: 260px; object-fit: cover; } /* CAROUSEL */ .carousel { display: flex; align-items: center; gap: 12px; } .carousel-card { flex: 1; min-width: 0; } .arrow { flex-shrink: 0; font-family: inherit; font-size: 1.1rem; line-height: 1; background: var(--card); color: var(--accent-2); border: 2px solid var(--accent-2); box-shadow: 3px 3px 0 var(--accent-2); width: 48px; height: 48px; cursor: pointer; transition: transform 0.1s ease, box-shadow 0.1s ease; } .arrow:hover { background: var(--soft); } .arrow:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--accent-2); } .arrow:disabled { opacity: 0.4; cursor: default; } /* HOBBIES */ .hobbies { display: flex; flex-direction: column; gap: 24px; } @media (max-width: 600px) { body { font-size: 16px; } .page { padding: 32px 16px 72px; } .photo img { height: 200px; } .carousel { gap: 8px; } .arrow { width: 40px; height: 40px; font-size: 0.9rem; } .card { padding: 18px; } }