|
|
| (26 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| /* Roovet Data main page design */
| |
| .rd-main {
| |
| --rd-red: #d71920;
| |
| --rd-red-dark: #a90f16;
| |
| --rd-blue: #3156a3;
| |
| --rd-green: #2f7d4f;
| |
| --rd-ink: #1f2937;
| |
| --rd-muted: #5f6b7a;
| |
| --rd-line: #d8dee8;
| |
| --rd-soft: #f6f8fb;
| |
| --rd-white: #fff;
| |
| max-width: 1160px;
| |
| margin: 0 auto;
| |
| padding: 12px 0 32px;
| |
| color: var(--rd-ink);
| |
| }
| |
|
| |
|
| .rd-main * {
| |
| box-sizing: border-box;
| |
| }
| |
|
| |
| .rd-hero {
| |
| position: relative;
| |
| overflow: hidden;
| |
| padding: 42px;
| |
| border: 1px solid var(--rd-line);
| |
| border-radius: 8px;
| |
| background:
| |
| radial-gradient(circle at top right, rgba(215, 25, 32, .14), transparent 34%),
| |
| linear-gradient(135deg, #ffffff 0%, #f5f7fb 58%, #eef2f8 100%);
| |
| box-shadow: 0 14px 40px rgba(31, 41, 55, .08);
| |
| }
| |
|
| |
| .rd-hero:before {
| |
| content: "";
| |
| position: absolute;
| |
| inset: auto -80px -130px auto;
| |
| width: 340px;
| |
| height: 340px;
| |
| border-radius: 999px;
| |
| background: rgba(49, 86, 163, .11);
| |
| }
| |
|
| |
| .rd-hero-kicker {
| |
| display: inline-flex;
| |
| align-items: center;
| |
| gap: 8px;
| |
| margin-bottom: 12px;
| |
| padding: 7px 12px;
| |
| border: 1px solid rgba(215, 25, 32, .24);
| |
| border-radius: 999px;
| |
| background: rgba(255, 255, 255, .82);
| |
| color: var(--rd-red-dark);
| |
| font-size: 13px;
| |
| font-weight: 700;
| |
| letter-spacing: .04em;
| |
| text-transform: uppercase;
| |
| }
| |
|
| |
| .rd-hero h1 {
| |
| margin: 0;
| |
| font-size: clamp(32px, 5vw, 58px);
| |
| line-height: 1.02;
| |
| letter-spacing: -.04em;
| |
| color: #111827;
| |
| border: 0;
| |
| }
| |
|
| |
| .rd-hero-lede {
| |
| max-width: 820px;
| |
| margin: 18px 0 24px;
| |
| color: var(--rd-muted);
| |
| font-size: 18px;
| |
| line-height: 1.62;
| |
| }
| |
|
| |
| .rd-search-card {
| |
| position: relative;
| |
| max-width: 760px;
| |
| padding: 10px;
| |
| border: 1px solid var(--rd-line);
| |
| border-radius: 8px;
| |
| background: rgba(255, 255, 255, .94);
| |
| box-shadow: 0 10px 30px rgba(31, 41, 55, .08);
| |
| }
| |
|
| |
| .rd-search-form {
| |
| display: flex;
| |
| gap: 10px;
| |
| }
| |
|
| |
| .rd-search-form input[type="search"] {
| |
| min-width: 0;
| |
| flex: 1;
| |
| padding: 14px 16px;
| |
| border: 1px solid #ccd4df;
| |
| border-radius: 6px;
| |
| color: #111827;
| |
| font-size: 16px;
| |
| background: #fff;
| |
| }
| |
|
| |
| .rd-search-form button {
| |
| padding: 13px 18px;
| |
| border: 0;
| |
| border-radius: 6px;
| |
| background: var(--rd-red);
| |
| color: #fff;
| |
| font-weight: 700;
| |
| cursor: pointer;
| |
| }
| |
|
| |
| .rd-search-form button:hover {
| |
| background: var(--rd-red-dark);
| |
| }
| |
|
| |
| .rd-hero-actions {
| |
| display: flex;
| |
| flex-wrap: wrap;
| |
| gap: 8px;
| |
| margin-top: 18px;
| |
| }
| |
|
| |
| .rd-chip {
| |
| display: inline-flex;
| |
| padding: 7px 10px;
| |
| border: 1px solid var(--rd-line);
| |
| border-radius: 999px;
| |
| background: rgba(255, 255, 255, .78);
| |
| color: #334155;
| |
| font-size: 13px;
| |
| font-weight: 600;
| |
| }
| |
|
| |
| .rd-stat-row {
| |
| display: grid;
| |
| grid-template-columns: repeat(4, minmax(0, 1fr));
| |
| gap: 12px;
| |
| margin: 16px 0;
| |
| }
| |
|
| |
| .rd-stat {
| |
| padding: 20px;
| |
| border: 1px solid var(--rd-line);
| |
| border-radius: 8px;
| |
| background: var(--rd-white);
| |
| }
| |
|
| |
| .rd-stat strong {
| |
| display: block;
| |
| color: #111827;
| |
| font-size: 26px;
| |
| line-height: 1;
| |
| }
| |
|
| |
| .rd-stat span {
| |
| display: block;
| |
| margin-top: 7px;
| |
| color: var(--rd-muted);
| |
| font-size: 13px;
| |
| font-weight: 700;
| |
| text-transform: uppercase;
| |
| letter-spacing: .04em;
| |
| }
| |
|
| |
| .rd-grid {
| |
| display: grid;
| |
| gap: 16px;
| |
| margin-top: 16px;
| |
| }
| |
|
| |
| .rd-grid-3 {
| |
| grid-template-columns: repeat(3, minmax(0, 1fr));
| |
| }
| |
|
| |
| .rd-grid-2 {
| |
| grid-template-columns: repeat(2, minmax(0, 1fr));
| |
| }
| |
|
| |
| .rd-card,
| |
| .rd-panel,
| |
| .rd-bottom {
| |
| border: 1px solid var(--rd-line);
| |
| border-radius: 8px;
| |
| background: var(--rd-white);
| |
| box-shadow: 0 8px 24px rgba(31, 41, 55, .05);
| |
| }
| |
|
| |
| .rd-card {
| |
| padding: 24px;
| |
| border-top: 5px solid var(--rd-blue);
| |
| }
| |
|
| |
| .rd-card-red {
| |
| border-top-color: var(--rd-red);
| |
| }
| |
|
| |
| .rd-card-green {
| |
| border-top-color: var(--rd-green);
| |
| }
| |
|
| |
| .rd-card h2,
| |
| .rd-panel h3,
| |
| .rd-bottom h2,
| |
| .rd-section-title h2 {
| |
| margin-top: 0;
| |
| color: #111827;
| |
| border: 0;
| |
| }
| |
|
| |
| .rd-card p,
| |
| .rd-panel p,
| |
| .rd-bottom p,
| |
| .rd-section-title p {
| |
| color: var(--rd-muted);
| |
| line-height: 1.58;
| |
| }
| |
|
| |
| .rd-card ul {
| |
| margin: 18px 0 0;
| |
| padding: 0;
| |
| list-style: none;
| |
| }
| |
|
| |
| .rd-card li {
| |
| margin: 9px 0;
| |
| padding-left: 18px;
| |
| position: relative;
| |
| }
| |
|
| |
| .rd-card li:before {
| |
| content: "›";
| |
| position: absolute;
| |
| left: 0;
| |
| color: var(--rd-red);
| |
| font-weight: 800;
| |
| }
| |
|
| |
| .rd-main a {
| |
| color: #214f99;
| |
| font-weight: 650;
| |
| text-decoration: none;
| |
| }
| |
|
| |
| .rd-main a:hover {
| |
| text-decoration: underline;
| |
| }
| |
|
| |
| .rd-section-title {
| |
| margin: 30px 0 12px;
| |
| padding: 0 4px;
| |
| }
| |
|
| |
| .rd-section-title h2 {
| |
| font-size: 28px;
| |
| }
| |
|
| |
| .rd-panel {
| |
| padding: 22px;
| |
| background: linear-gradient(180deg, #fff, #fafbfe);
| |
| }
| |
|
| |
| .rd-bottom {
| |
| display: grid;
| |
| grid-template-columns: 1.3fr .7fr;
| |
| gap: 20px;
| |
| align-items: center;
| |
| margin-top: 18px;
| |
| padding: 26px;
| |
| background:
| |
| linear-gradient(135deg, rgba(215, 25, 32, .08), rgba(49, 86, 163, .08)),
| |
| #fff;
| |
| }
| |
|
| |
| .rd-bottom-links {
| |
| display: grid;
| |
| gap: 10px;
| |
| }
| |
|
| |
| .rd-bottom-links a {
| |
| display: block;
| |
| padding: 12px 14px;
| |
| border: 1px solid var(--rd-line);
| |
| border-radius: 6px;
| |
| background: #fff;
| |
| }
| |
|
| |
| @media (max-width: 900px) {
| |
| .rd-hero {
| |
| padding: 28px;
| |
| }
| |
|
| |
| .rd-stat-row,
| |
| .rd-grid-3,
| |
| .rd-grid-2,
| |
| .rd-bottom {
| |
| grid-template-columns: 1fr;
| |
| }
| |
|
| |
| .rd-search-form {
| |
| flex-direction: column;
| |
| }
| |
|
| |
| .rd-search-form button {
| |
| width: 100%;
| |
| }
| |
| }
| |
