diff --git a/assets/css/main.css b/assets/css/main.css
index 9927c2a..3348114 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -4245,6 +4245,179 @@ table.alt tbody tr td {
border-color: var(--table-border-color);
}
+/* ====================== OFiDCrypt Whitepaper - Modern Docs Style ====================== */
+
+.modern-docs {
+ margin: 3rem 0 4rem;
+}
+
+.modern-docs h2 {
+ font-size: 1.75rem;
+ font-weight: 700;
+ letter-spacing: -0.02em;
+ margin-bottom: 1.5rem;
+ text-align: center;
+ color: var(--heading-color, #a855f7);
+}
+
+/* Accordion Container */
+.docs-accordion {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+}
+
+.docs-accordion details {
+ border: 1px solid var(--table-border-color, #333344);
+ border-radius: 16px;
+ overflow: hidden;
+ background: var(--card-bg-color, #1a1a22);
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.docs-accordion details:hover {
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
+ transform: translateY(-3px);
+}
+
+.docs-accordion details[open] {
+ border-color: var(--accent-color, #a855f7);
+ box-shadow: 0 10px 25px rgba(168, 85, 247, 0.15);
+}
+
+/* Summary */
+summary {
+ padding: 1.25rem 2rem;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ cursor: pointer;
+ font-weight: 700;
+ font-size: 1.12rem;
+ color: var(--text-color, #e0e0e0);
+ list-style: none;
+ position: relative;
+}
+
+summary::-webkit-details-marker {
+ display: none;
+}
+
+.summary-title {
+ flex: 1;
+}
+
+.summary-count {
+ font-size: 0.9rem;
+ font-weight: 600;
+ color: var(--text-color, #e0e0e0);
+ background: rgba(168, 85, 247, 0.12);
+ border: 1px solid rgba(168, 85, 247, 0.3);
+ padding: 6px 14px;
+ border-radius: 9999px;
+}
+
+summary::after {
+ content: "›";
+ font-size: 1.5rem;
+ transition: transform 0.4s ease;
+ color: var(--accent-color, #a855f7);
+ margin: 14px;
+}
+
+details[open] summary::after {
+ transform: rotate(90deg);
+}
+
+/* Content Area */
+.accordion-content {
+ padding: 0 2rem 1.75rem;
+ color: var(--text-light, #b0b0b0);
+}
+
+.doc-list {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+
+.doc-list li {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 1rem 0;
+ border-bottom: 1px solid var(--table-border-color, #333344);
+ gap: 1rem;
+}
+
+.doc-list li:last-child {
+ border-bottom: none;
+}
+
+.doc-list a {
+ color: var(--link-color, #a855f7);
+ text-decoration: none;
+}
+
+.doc-list a:hover {
+ text-decoration: underline;
+}
+
+.doc-date {
+ color: var(--muted-color, #888);
+ font-size: 0.9rem;
+ white-space: nowrap;
+}
+
+/* Light Mode Support */
+@media (prefers-color-scheme: light) {
+ .docs-accordion details {
+ background: #ffffff;
+ border-color: #e0e0e0;
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
+ }
+
+ summary {
+ color: #1f2937;
+ }
+
+ .summary-count {
+ background: rgba(124, 58, 237, 0.1);
+ border-color: rgba(124, 58, 237, 0.25);
+ color: #4f46e5;
+ }
+
+ .accordion-content {
+ color: #4b5563;
+ }
+
+ .doc-list li {
+ border-bottom-color: #e5e7eb;
+ }
+
+ .doc-date {
+ color: #6b7280;
+ }
+}
+
+/* Mobile */
+@media screen and (max-width: 767px) {
+ summary {
+ padding: 1rem 1.5rem;
+ font-size: 1.05rem;
+ }
+
+ .accordion-content {
+ padding: 0 1.5rem 1.25rem;
+ }
+
+ .doc-list li {
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 0.5rem;
+ }
+}
/* Pagination */
.pagination {
display: -moz-inline-flex;
@@ -7345,178 +7518,148 @@ body.dark-mode .giddys-quick-card {
clear: both;
}
-/* Featured Service Section */
+/* ============================================= */
+/* FEATURED SERVICE SECTION - UNIFIED WITH SHOP */
+/* ============================================= */
+
.quick-start-title {
- margin-top: 1.5rem;
+ margin-top: 1.5rem;
}
.featured-service {
- margin-bottom: 0;
- /* No gap before footer */
- padding: 0;
- /* Remove left and right padding */
-}
-
-.featured-service .button {
- margin-top: auto;
+ margin-bottom: 0;
+ padding: 0;
}
+/* ====================== */
+/* CONTAINER */
.featured-service-items {
- display: flex;
- flex-direction: column;
- /* Stack tiles vertically on mobile */
- width: 100%;
- /* Ensure full width */
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+ gap: 2em;
+ margin-bottom: 2em;
+ justify-content: center;
+ width: 100%;
+ max-width: 1400px;
+ margin-left: auto;
+ margin-right: auto;
}
-.featured-service-items article:last-child {
- margin-bottom: 0;
- /* No gap for last tile */
+/* ====================== */
+/* INDIVIDUAL TILE */
+.featured-service-item--featured {
+ background: var(--card-bg, #fff);
+ border-radius: 1em;
+ overflow: hidden;
+ box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.1);
+ text-align: center;
+ padding: 1em;
+ max-width: 340px;
+ width: 100%;
+ margin: 0 auto;
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ box-sizing: border-box;
}
-.featured-service-item--featured {
- display: flex;
- flex-direction: column;
- /* Stack vertically on mobile */
- margin-bottom: 20px;
- border: 1px solid var(--quick-start-border-color);
- border-radius: 8px;
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
- padding: 30px;
- max-width: 100%;
- background-color: var(--quick-start-bg-color);
- box-sizing: border-box;
- /* Include padding in height */
+/* ====================== */
+/* IMAGE STYLES */
+.featured-service-item--featured .image {
+ padding: 0.75em;
+ overflow: hidden;
+ border-radius: 0.5em;
}
+/* Left-aligned version (if ever needed) */
.featured-service-item--featured .image.left {
- max-width: 60%;
- /* Mobile */
- margin: 0 auto;
- /* Center image */
+ display: block;
}
-.featured-service-item--featured .image.left img {
- max-width: 100%;
- /* Original scaling */
- height: auto;
- object-fit: contain;
- border-radius: 8px;
+/* Centered version - THIS IS WHAT WE WANT ON DESKTOP */
+.featured-service-item--featured .image.centered {
+ display: flex;
+ justify-content: center;
+ align-items: center;
}
-.featured-service-item--featured .quick-start-content {
- text-align: center;
- flex: 1;
+.featured-service-item--featured .image.centered img,
+.featured-service-item--featured .image.left img {
+ width: 100%;
+ max-width: 240px; /* Perfect size for centering */
+ height: auto;
+ border-radius: 0.5em;
+ display: block;
+ transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
-/* Media Query for Tablets and Above */
-@media (min-width: 737px) {
- .featured-service-items {
- display: block;
- /* Stack tiles vertically, like mobile */
- width: 100%;
- /* Ensure full width */
- max-width: 600px;
- /* Cap width for centering */
- margin: 0 auto;
- /* Center the container */
- }
-
- .featured-service-item--featured {
- flex-direction: row;
- /* Image left, content right */
- align-items: center;
- /* Vertically center content */
- width: 100%;
- max-width: 550px;
- /* Cap item width for better scaling */
- margin: 0 auto 30px;
- /* Center items, add bottom margin */
- height: auto;
- /* Allow natural height */
- }
+/* Hover effect */
+.featured-service-item--featured:hover .image img {
+ transform: scale(1.16);
+}
- .featured-service-item--featured .image.left {
- max-width: 250px;
- /* Fixed width for consistency */
- margin-left: 15px;
- margin-right: 15px;
- display: flex;
- /* Center image within its container */
- justify-content: center;
- align-items: center;
- }
+/* Content */
+.featured-service-item--featured .quick-start-content {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ text-align: center;
+ padding: 0 0.5em;
+}
- .featured-service-item--featured .image.left img {
- max-width: 100%;
- /* Original scaling */
- height: auto;
- object-fit: contain;
- border-radius: 8px;
- }
+.featured-service-item--featured .quick-start-content h3.quick-start-title {
+ margin: 0.5em 0 0.25em;
+ font-size: 1.2em;
+}
- .featured-service-item--featured .quick-start-content {
- text-align: center;
- /* Keep centered text */
- flex: 1;
- }
+.featured-service-item--featured .quick-start-content p.align-center {
+ margin-bottom: 1em;
+ line-height: 1.55;
+ flex: 1;
}
-/* Media Query for Desktop */
-@media (min-width: 1200px) {
- .featured-service-items {
- display: grid;
- grid-template-columns: repeat(2, minmax(300px, 1fr));
- /* 2 columns, min 300px */
- grid-template-rows: auto;
- /* Auto rows for flexibility */
- gap: 30px;
- /* Space between tiles */
- grid-auto-flow: row;
- /* Tiles 1,2 in row 1; 3,4 in row 2 */
- width: 100%;
- max-width: 1200px;
- /* Cap grid width */
- margin: 0 auto;
- /* Center grid */
- justify-items: center;
- /* Center grid items */
- }
+/* Button */
+.featured-service-item--featured .round-button {
+ background: rgba(168, 85, 247, 0.8);
+ color: white;
+ border: none;
+ padding: 0.85em 1.8em;
+ font-size: 1.05em;
+ border-radius: 0.5em;
+ width: fit-content;
+ margin: 0.8em auto 0.5em;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 0.5em;
+ transition: all 0.3s ease;
+}
- .featured-service-item--featured {
- flex-direction: row;
- /* Image left, content right */
- align-items: center;
- /* Vertically center content */
- width: 100%;
- max-width: 550px;
- /* Cap item width */
- height: 100%;
- /* Fill grid cell */
- }
+.featured-service-item--featured .round-button:hover {
+ transform: scale(1.05);
+ background: rgba(168, 85, 247, 1);
+}
- .featured-service-item--featured .image.left {
- max-width: 250px;
- /* Desktop, as per original */
- margin-left: 15px;
- margin-right: 15px;
- display: flex;
- justify-content: center;
- align-items: center;
- }
+/* Dark Mode */
+body.dark-mode .featured-service-item--featured {
+ background: #1a1a2e;
+ color: #e2e8f0;
+}
- .featured-service-item--featured .image.left img {
- max-width: 100%;
- /* Original scaling */
- height: auto;
- object-fit: contain;
- border-radius: 8px;
- }
+/* Responsive */
+@media (max-width: 480px) {
+ .featured-service-items {
+ grid-template-columns: repeat(1, 1fr);
+ gap: 1.5em;
+ }
+}
- .featured-service-item--featured .quick-start-content {
- text-align: center;
- flex: 1;
- }
+@media (min-width: 981px) {
+ .featured-service-items {
+ grid-template-columns: repeat(auto-fit, minmax(300px, 340px));
+ gap: 2em;
+ }
}
/* Parent styles */
diff --git a/docs/files/whitepaper-perfect-loop.pdf b/docs/files/whitepaper-perfect-loop.pdf
new file mode 100644
index 0000000..899ba33
Binary files /dev/null and b/docs/files/whitepaper-perfect-loop.pdf differ
diff --git a/docs/main.html b/docs/main.html
index 153269e..2b5e4a7 100644
--- a/docs/main.html
+++ b/docs/main.html
@@ -201,7 +201,8 @@
Welcome! We're new — and Giddy’s Shop is in development. Meanwhile, watch our
- animated adventures and meet Giddy!
+ animated adventures and meet
+ Giddy!
We encourage you to read our
Solana
article
@@ -218,80 +219,146 @@
Home > Documents
- These documents are continuously updated. Learn about our revolutionary breakthrough; enabling
- token gifting and all-new brand loyalty through family products in commerce.
+
+ Continuously updated. Read how we’re redefining commerce with token gifting
+ and innovative brand loyalty through everyday family products.
+
-
-