Spaces:
Running
Running
File size: 3,302 Bytes
b50d145 bf5f536 b50d145 5dbea12 b50d145 5dbea12 b50d145 5dbea12 b50d145 5dbea12 b50d145 5dbea12 bf5f536 b50d145 bf5f536 5dbea12 b50d145 bf5f536 5dbea12 bf5f536 b50d145 5dbea12 eafca0b 5dbea12 b50d145 5dbea12 b50d145 bf5f536 b50d145 bf5f536 b50d145 5dbea12 bf5f536 6be826d d54f9ca |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 |
:root{
--brand-bg: #191f70;
--brand-pink: #df4085;
--brand-white: #ffffff;
--font-serif: "Bodoni Moda", "Bodoni", "Didot", serif;
--font-sans: "Avenir Next", "Avenir", "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
--card-radius: 24px;
--shadow: 0 8px 24px rgba(0,0,0,.15);
}
* { box-sizing: border-box; }
html, body {
margin: 0;
background: var(--brand-white);
color: #0c0c21;
font-family: var(--font-sans);
}
.container { max-width: 1060px; margin: 0 auto; padding: clamp(16px, 3vw, 32px); }
.h1 {
font-family: var(--font-serif);
font-weight: 400; /* not bold */
color: var(--brand-bg); /* blue title */
line-height: 1.1;
/* kerning / tracking */
font-kerning: normal; /* use font’s kerning pairs */
letter-spacing: -0.01em; /* slightly tighter tracking */
font-size: clamp(28px, 4.2vw, 56px);
margin: 12px 0 20px;
}
.subtitle {
margin-top: -6px;
margin-bottom: 16px;
color: #4a4f93;
font-size: 14px;
}
.subtitle a {
color: #191f70;
font-weight: 600;
text-decoration: none;
border-bottom: 1px solid rgba(25,31,112,.25);
}
.subtitle a:hover { border-bottom-color: rgba(25,31,112,.5); }
.card {
background: var(--brand-white);
color: #0c0c21;
border-radius: var(--card-radius);
box-shadow: var(--shadow);
padding: clamp(16px, 2.6vw, 28px);
}
.tooltip {
position: absolute; pointer-events: none;
background: #fff; color: #111125;
padding: 8px 10px; border-radius: 10px;
box-shadow: 0 6px 16px rgba(0,0,0,.2);
font-size: 12px; max-width: 240px;
border: 1px solid rgba(0,0,0,.05);
}
/* responsive image sizing: desktop big, mobile smaller */
.figure {
display:flex; align-items:center; gap:16px; margin-bottom:8px; color:#111; font-weight:700;
}
.figure img.resp {
height: 160px; width: auto; /* desktop size */
}
@media (max-width: 640px) { /* mobile: shrink */
.figure img.resp { height: 96px; }
}
/* Food switcher buttons */
.switcher {
display: flex;
gap: 10px;
margin: 16px 0 12px;
}
.switcher button {
border: 1px solid #ccd1ff;
padding: 8px 14px;
border-radius: 999px;
background: var(--brand-white);
color: var(--brand-bg);
font-weight: 700;
cursor: pointer;
transition: background .15s ease, box-shadow .15s ease, transform .02s ease;
}
.switcher button:hover { box-shadow: 0 0 0 2px rgba(185,192,255,.7) inset; }
.switcher button:active { transform: translateY(1px); }
.switcher button.selected,
.switcher button[aria-selected="true"] {
background: #e6e9ff;
box-shadow: 0 0 0 2px #b9c0ff inset;
}
/* Image switcher buttons */
.switcher.imgs {
display: flex;
gap: 12px;
margin: 16px 0 12px;
}
.imgbtn {
display: inline-flex;
align-items: center;
gap: 10px;
border: 1px solid #ccd1ff;
background: var(--brand-white);
color: var(--brand-bg);
font-weight: 700;
padding: 8px 12px;
border-radius: 999px;
cursor: pointer;
transition: background .15s ease, box-shadow .15s ease, transform .02s ease;
}
.imgbtn img {
height: 28px;
width: auto;
display: block;
}
.imgbtn:hover { box-shadow: 0 0 0 2px rgba(185,192,255,.7) inset; }
.imgbtn:active { transform: translateY(1px); }
.imgbtn.selected,
.imgbtn[aria-selected="true"] {
background: #e6e9ff;
box-shadow: 0 0 0 2px #b9c0ff inset;
}
|